Boucle avec Sass

17. novembre 2016 SASS 0
Boucle avec Sass

Bombasse

Il y a peut que je me suis mis à SASS et c’est vraiment de la «bombe» !

Je me perdais pas mal dans l’architecture de mes fichiers CSS, mais ça, c’était avant.

Je vais vous montrer un bout de script que j’ai voulu mettre en place. J’avoue j’ai fait différemment car mon code ne fonctionnait pas. Jusqu’au jour ou quelqu’un m’ a donné la solution à mon problème.

 

Exemple d’un mauvais code

Le but était d’implémenter du css pour différents éléments d’une liste et je voulais utiliser les boucles.

Dans notre cas, c’est pour 6 éléments, nous affectons une largeur différentes.

@for $i from 1 through 6 {
	$n: 1.5em * $i;
	.step:nth-child($i) {
		input[type="radio"]:checked + label:after {
			width: calc(100% + $n);
		}
	}
}
Mauvais code

 

Solution

Nous notons que les variables doivent être enveloppées d’accolades et précédées d’un dièse (#). En consultant la documentation de SASS, je n’avais pas fais attention à cette notation.

@for $i from 1 through 6 {
	$n: 1.5em * $i;
	.step:nth-child(#{$i}) {
		input[type="radio"]:checked + label:after {
			width: calc(100% + #{$n});
		}
	}
}
Bon code

 


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *