Comment utiliser les instructions if dans LESS

Je cherche une sorte de if-statement pour contrôler la background-color de background-color des différents éléments div .

J’ai essayé le ci-dessous, mais il ne comstack pas

 @debug: true; header { background-color: (yellow) when (@debug = true); #title { background-color: (orange) when (@debug = true); } } article { background-color: (red) when (@debug = true); } 

LESS a des expressions de garde pour les mixins, pas des atsortingbuts individuels.

Donc, vous créez un mixin comme ceci:

 .debug(@debug) when (@debug = true) { header { background-color: yellow; #title { background-color: orange; } } article { background-color: red; } } 

Et l’activez ou désactivez en appelant .debug(true); ou .debug(false) (ou ne pas l’appeler du tout).

Il existe un moyen d’utiliser des gardes pour des atsortingbuts individuels (ou multiples).

 @debug: true; header { /* guard for atsortingbute */ & when (@debug = true) { background-color: yellow; } /* guard for nested class */ #title when (@debug = true) { background-color: orange; } } /* guard for class */ article when (@debug = true) { background-color: red; } /* and when debug is off: */ article when not (@debug = true) { background-color: green; } 

… et avec moins 1.7; comstack pour:

 header { background-color: yellow; } header #title { background-color: orange; } article { background-color: red; } 

Je suis tombé sur la même question et j’ai trouvé une solution.

Assurez-vous d’abord de passer à LESS 1.6 au moins. Vous pouvez utiliser npm pour ce cas.

Maintenant, vous pouvez utiliser le mixin suivant:

 .if (@condition, @property, @value) when (@condition = true){ @{property}: @value; } 

Depuis LESS 1.6, vous pouvez également transmettre PropertyNames aux Mixins. Donc, par exemple, vous pouvez simplement utiliser:

 .myHeadline { .if(@include-lineHeight, line-height, '35px'); } 

Si @ include-lineheight se résume à true, LESS imprime la line-height: 35px et line-height: 35px le mixin si @ include-lineheight n’est pas vrai.

J’ai écrit un mixin pour du sucre syntaxique;)
Peut-être que quelqu’un aime cette façon d’écrire mieux que d’utiliser des gardes

dépend de moins 1.7.0

https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less

Usage:

 .if(isnumber(2), { .-then(){ log { isnumber: true; } } .-else(){ log { isnumber: false; } } }); .if(lightness(#fff) gt (20% * 2), { .-then(){ log { is-light: true; } } }); 

en utilisant l’exemple ci-dessus

 .if(@debug, { .-then(){ header { background-color: yellow; #title { background-color: orange; } } article { background-color: red; } } });