Calculer un pourcentage avec SCSS/SASS

Question

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

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

Je veux faire quelque chose comme

$ma_largeur: (4/12)%;

div{
largeur: $ma_largeur;
}

comment ajouter le signe % là-dedans?

Même question avec px et em

Answer 1

Avez-vous essayé la fonction percentage ?

$my_width: percentage(4/12);
div{
    width: $my_width;
}

---

MISE À JOUR

Cette fonction a été mise à jour depuis la version 1.33.0 et maintenant c'est une méthode correcte pour le faire :

@use "sass:math";

div {
    width: math.percentage(math.div(4,12));
}

Source: https://sass-lang.com/documentation/modules/math#percentage

Answer 2

Une autre façon :

$my_width: 4/12 * 100%;

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

Sass va produire la valeur en %.

Answer 3

J'ai pu le faire fonctionner de cette manière:

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

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

Answer 4

Si vous voulez utiliser une boucle, peut-être que cette solution fonctionnera

@for $i from 1 through 12 {
    .col-#{$i} {
        width: #{calc(100 * $i / 12) + '%'};
    }
}