MENO Guardie CSS senza mixin

Question

Sto appena entrando in MENO e sto cercando di capire come posso creare dichiarazioni condizionali di CSS senza mixin. Trovo che ho un sacco di istruzioni css a riga singola che si verificano solo una volta ma dipendono da alcune variabili o condizioni e che l'utilizzo di mixins è un po 'inutile dal momento che non verrà mai riutilizzato.

Esempio.

@add-margin: true; 

body { 
    margin-top: 20px; //I only want this if add-margin is true 
} 

Quindi idealmente voglio questo:

body when (@add-margin) { 
    margin-top: 20px; 
} 

Ma questo non funziona. Usare un mixin funziona ma sembra sciocco farne uno solo per un solo rivestimento. C'è un modo alternativo che posso fare questo?

Grazie

Answer 1

no, non è possibile in quella forma.

potresti usare una variabile uguale a 0 o 1 e moltiplicare per 20 e quindi emettere sempre una regola, o usare JavaScript (ti consiglierei di evitarlo) per convertire true in 0 o 20 e generare sempre una regola, ma se vuoi che la proprietà venga aggiunta in modo condizionale, hai bisogno di guardie.

Answer 2

sì è possibile, è simile al tuo codice.

@add-margin: true; 

.margin() when (@add-margin) { 
    margin-top: 20px; 
} 

body { .margin(); } 

UPDATE: Utilizzando le ultime versioni di MENO (1.5+), l'utilizzo di "mixins sorvegliati" non sono tenuti a raggiungere questo obiettivo, e si potrebbe usare "gaurds CSS", invece, quindi il codice del PO sarà lavoro fuori dalla scatola

Answer 3

CSS Guards la funzionalità è stata introdotta in meno v1.5.0 e quindi ora possiamo usare le protezioni nello stesso modo menzionato nella domanda.

@add-margin: true; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

Se nel caso, è necessario assegnare più tali proprietà a diversi selettori basati sulla stessa variabile, può essere implementato come di seguito utilizzando il selettore &.

& when (@add-margin){ 
    body{ 
     margin-top: 20px; 
    } 
    h1{ 
     margin-top: 10px; 
    } 
} 

Nota: Come menzionato da memeLab nei commenti, qualsiasi valore per la variabile di @add-margin diverso true sono considered as falsy. Questo perché true è una parola chiave mentre 'true' è un valore di stringa. Ad esempio, il sotto non produrrebbe nulla.

@add-margin: 'true'; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

Tuttavia, il sotto funzionerà perché esegue un confronto String.

@add-margin: 'true'; 

body when (@add-margin = 'true'){ 
    margin-top: 20px; 
} 

Se si utilizza meno compilatore inferiore v1.5.0 allora la risposta inviato da Unicornist è la migliore scommessa.