web-dev-qa-db-fra.com

MOINS: soustraire de la variable

En utilisant MOINS, 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 cela de 1px

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

Comment puis-je y parvenir avec MOINS?

cssless
23
cusejuice

Désolé d'avoir répondu si tard, mais j'ai eu ce même problème et il semble que MOINS soit difficile sur l'espacement. Tu as aussi besoin () autour de votre calcul.

Cela ne fonctionnera pas:

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

Cependant, ce sera (notez l'espace entre la variable et le chiffre):

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

Vous pouvez toujours utiliser le calc function pour cela.

Syntaxe: calc(expression)

Par exemple:

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

Ici sont la liste des navigateurs qui prennent en charge cette fonction

EDIT 1:

vous pouvez l'utiliser de deux manières:

ENTRÉE MOINS:

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

Sortie CSS:

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

2ème voie: moins d'entrée:

@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 de les empêcher d'être évalués lors de 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 lors de la compilation. Et ce serait la même chose que

max-width: @bpMobile - 1px;

qui se traduira par

max-width: 599px;
10
heretolearn

Le problème n'est pas la fonction mathématique, c'est que vous essayez de l'utiliser dans une requête multimédia. Les documents disent 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 {
}
3
freejosh

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

L'astuce consiste simplement à ajouter des parenthèses autour de chaque variable ou calcul à l'intérieur d'une requête multimédia:

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

ou

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