loops tuto SCSS pour chaque boucle avec plusieurs variables avec des valeurs décimales



tuto sass (1)

J'ai des problèmes avec une boucle SASS @each avec plusieurs variables utilisant des décimales. Je peux le faire fonctionner à un niveau basique mais je veux ajouter des décimales, ce qui me jette des erreurs.

Par exemple..

$columns: 100, 25, 33;

@each $proportion in $columns {
  .col_#{nth($proportion, 1)} {
    width: percentage($proportion/100);
  }
}

... va compiler avec succès pour ...

.col_100 {
    width: 100%;
}

.col_25 {
    width: 25%;
}

.col_33 {
    width: 33%;
}

Cependant, essayer d'ajouter un nombre décimal à la liste des variables me renvoie une erreur. Par exemple, comment puis-je faire fonctionner ça ...

$columns: 100, 25, 33.333;

Vous pouvez arrondir la valeur du nom de la classe:

@each $proportion in $columns {
  .col_#{floor(nth($proportion, 1))} {
    width: percentage($proportion/100);
  }
}

Sortie:

.col_100 {
  width: 100%;
}

.col_25 {
  width: 25%;
}

.col_33 {
  width: 33.333%;
}




sass