Calculer un pourcentage avec SCSS / SASS

121

Je veux définir une largeur en pourcentage dans scss via le calcul, mais cela me donne des erreurs.

CSS invalide après "...- largeur: (4/12)%": expression attendue (par exemple 1px, gras), était ";"

Je veux faire quelque chose comme

$my_width: (4/12)%;

div{
width: $my_width;
}

comment ajouter le signe% là-bas?

Même question avec px et em

css sass Nick Ginanto
la source
1
Il n'y a rien à jouer. Je veux juste ajouter l'unité du nombre au calcul. Identique à (400/20) px. Comment avoir un nombre et px / em /% dans scss? De cette façon, je pourrais avoir des "variables globales" que je peux changer une fois
Nick Ginanto
Essayez d'ajouter une parenthèse comme $ my_width: ((4/12)%);
Sri
Oups ... Désolé, je n'ai pas eu l'occasion de le vérifier et d'essayer encore une fois. {$ My_width: (4/12)%;}
Sri

Réponses:

211

Avez-vous essayé la fonction de pourcentage ?

$my_width: percentage(4/12);
div{
width: $my_width;
}
Tomas
la source
1
y a-t-il une fonction similaire pour px et em?
Nick Ginanto
1
Pas sûr, mais dans la section source de la documentation, vous pouvez voir la logique sous-jacente: Sass :: Script :: Number.new (value.value * 100, ['%']), donc je pense que si ce n'est pas le cas existe, vous pouvez le faire directement ou créer vous-même des fonctions d'encapsulation.
Tomas
4
@NickGinanto pour px, vous pouvez simplement ajouter +pxà la fin de la ligne, par exemplewidth: ($foo + $bar) +px
DisgruntledGoat
2
@DisgruntledGoat Non, vous ne devriez jamais faire ça en aucune circonstance. L'ajout d'unités doit se faire par multiplication (par exemple $foo + $bar * 1px), concaténer l'unité comme cela ne vous donne qu'une chaîne.
cimmanon
@cimmanon est-ce que ça a changé récemment? Je suis sûr que ce n'était pas le cas lorsque j'ai publié mon commentaire.
DisgruntledGoat
30

Autrement:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass affichera la valeur en%.

rlejnieks
la source
13
Notez que j'ai dû utiliser 100/6 * 1% pour que cela fonctionne pour moi, sinon je me suis retrouvé avec 1666,67%.
sp00n
où puis-je trouver une documentation ce que fait réellement * 100%?
Ini
1

J'ai pu le faire fonctionner de cette façon:

div{
   width: (4/12)* 1%;
   }

De cette façon, vous n'avez pas besoin d'utiliser de fonction spéciale.

Enrique Cuchetti
la source