MOINS : Soustraire de la variable

Question

En utilisant LESS, comment puis-je soustraire des valeurs avec "px" à la fin de la variable. J'ai la variable suivante :

@bpMobile: 600px

Ce que je veux faire, c'est soustraire cette valeur de 1px.

@media only screen and (max-width: @bpMobile - 1px ) {
}

Comment puis-je y parvenir avec LESS ?

Answer 1

Désolé de répondre si tard, mais j'ai eu ce même problème et il semble que LESS soit pointilleux sur l'espacement. Vous devez également () autour de votre calcul.

Cela ne fonctionnera pas :

@media screen and (max-width: (@widthSmall-2)) { }

Cependant, cela (remarquez l'espace entre la variable et le chiffre) :

@media screen and (max-width: (@widthSmall - 2)) { }

Answer 2

Vous pouvez toujours utiliser le calc function pour ça.

Syntaxe : calc(expression)

Eg :

abc {
  width:calc(100%-20px)
}

Ici sont la liste des navigateurs qui supportent cette fonction

EDIT 1 :

vous pouvez l'utiliser des deux manières suivantes :

LESS Input :

@bpMobile: 600px;
max-width: calc(~'@{bpMobile} - 1px');

Sortie CSS :

max-width: calc(600px - 1px);

2ème voie : Moins d'entrées :

@bpMobile: 600px;
max-width: calc(@bpMobile - 1px);

Sortie CSS :

max-width: calc(599px);

Avec la première option, les arguments calc sont échappés afin d'éviter qu'ils ne soient évalués à la compilation. Les valeurs resteront totalement statiques jusqu'à ce qu'elles soient évaluées par le client.

Avec la deuxième option, la valeur de calc sera évaluée à la compilation. Et ce serait la même chose que

max-width: @bpMobile - 1px; 

qui se traduira par

max-width: 599px;

Answer 3

Le correctif de freejosh ne fonctionne pas pour moi avec lesscss 1.7.0.

Pour cela, il suffit d'ajouter des paranthèses autour de chaque variable ou calcul dans une requête média :

@media only screen and (max-width: (@bpMobile - 1px) ) { ... }

ou

@other: @bpMobile - 1px;
@media only screen and (max-width: (@other) ) { ... }

Answer 4

Le problème n'est pas la fonction mathématique, c'est que vous essayez de l'utiliser dans une requête média. Les docs dire que vous devez faire de la requête entière une variable :

@bpMobile: 600px;
@bpMobile1: @bpMobile - 1px;

@singleQuery: ~"only screen and (max-width: @{bpMobile1})";

@media @singleQuery {
}

Answer 5

---------- ---------- ---------- --

Dans mon cas .

      .loop(@i) when (@i > 0) {
        @index : @i + 1;

        .abc_@{i}{
          z-index : @index;
        }

        .loop(@i -1);
      }
      .loop(8);

donnera un résultat :

.abc_8{
  z-index : 8 + 1;
}

---------- ---------- ---------- --

Autre cas :

      .loop(@i) when (@i > 0) {
        @index : pow(@i,1) + 1;

        .abc_@{i}{
          z-index : @index;
        }

        .loop(@i -1);
      }
      .loop(8);

donnera un résultat :

.abc_8{
  z-index : 9;
}