web-dev-qa-db-fra.com

Comment utiliser les instructions if dans LESS

Je cherche une sorte de déclaration if pour contrôler le background-color de différents div éléments.

J'ai essayé le ci-dessous, mais ça ne compile pas

@debug: true;

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

article {
  background-color: (red) when (@debug = true);
}
cssif-statementless
52
nkint

LESS a expressions de garde pour les mixins, pas les attributs 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 allumez-le ou éteignez-le en appelant .debug(true); ou .debug(false) (ou ne l'appelant pas du tout).

50
freejosh

Il existe un moyen d'utiliser des gardes pour des attributs individuels (ou multiples).

@debug: true;

header {
    /* guard for attribute */
    & 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 de 1,7; compile pour:

header {
    background-color: yellow;
}
header #title {
    background-color: orange;
}
article {
    background-color: red;
}
112
Onur Yıldırım

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

D'abord, assurez-vous de mettre à niveau au moins 1.6. 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 les noms de propriété à Mixins. Ainsi, par exemple, vous pouvez simplement utiliser:

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

Si @ include-lineheight est résolu en true LESS affichera le line-height: 35px et il ignorera le mixin si @ include-lineheight n’est pas vrai.

20
Pascal Raszyk

J'ai écrit un mixin pour du sucre syntaxique;)
Peut-être que quelqu'un aime cette façon d'écrire si-alors-sinon 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;
        }
    }
});
8
user950658