SASS Multiplication avec des unités
Si j'essaie de multiplier deux de la valeur des unités, j'obtiens une erreur inattendue.
$test: 10px;
.testing{
width: $test * $test;
}
result: 100px*px isn't a valid CSS value.
- Regardez comprendre-sass-unités.
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas multiplier deux px valeurs. Meilleure façon de le faire est de la fonction, mais vous devez utiliser les ajouter à atteindre: -
Multipliant les unités de SASS fonctionne comme en multipliant les unités en physique /ingénierie /chimie /[insérer la science ici].
(voir plus à ce sujet à https://www.sitepoint.com/understanding-sass-units/)
Multiplication de deux valeurs de pixels, vous obtiendrez px^2, qui est une zone, pas loin.
Que pouvez-vous faire? Si vous êtes certain que vous serez en multipliant pixels, l'utilisation d'une fonction et de diviser par 1 pixel.
Si vous ne savez pas quelles unités vous serez en utilisant à l'avance, vous pouvez enlever les unités à partir de $valeur2, de sorte que vous obtenez toujours les unités de $valeur1.
(lire plus à ce sujet à https://css-tricks.com/snippets/sass/strip-unit-function/)
%
unité, vous devriez diviser pour100%
, pas1%
.J'ai utilisé interpolation dans le passé, lorsque je veux faire des maths avec des variables, et je pense que c'est la solution la plus simple. Si cela ne fonctionne pas pour vous, c'est peut-être due à une différence dans les compilateurs?
En fait
width: $test * 2;
compile dewidth: 20px
pour moi, vous n'avez même pas besoin d'utiliser l'interpolation de mathématiques simples. Je suis à l'aide de braise-cli-sass, qui utilise le brocoli-sass-source-cartes, qui utilise nœud-sass, qui s'enroule libsass, pour compiler mon SCSS en CSS. Mais il semble bien fonctionner dans cette jsbin qui utilise SCSS avec Boussole.Lorsque l'interpolation aide vraiment si vous avez besoin d'utiliser
calc
.