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
source

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
source

y a-t-il une fonction similaire pour px et em?

— Nick Ginanto

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

@NickGinanto pour px, vous pouvez simplement ajouter +pxà la fin de la ligne, par exemplewidth: ($foo + $bar) +px

— DisgruntledGoat

@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

Autrement:

$my_width: 4/12*100%;

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

Sass affichera la valeur en%.

— rlejnieks
source

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

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
source