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.

[pastacode lang= »sass » manual= »%40for%20%24i%20from%201%20through%206%20%7B%0A%09%24n%3A%201.5em%20*%20%24i%3B%0A%09.step%3Anth-child(%24i)%20%7B%0A%09%09input%5Btype%3D%22radio%22%5D%3Achecked%20%2B%20label%3Aafter%20%7B%0A%09%09%09width%3A%20calc(100%25%20%2B%20%24n)%3B%0A%09%09%7D%0A%09%7D%0A%7D » message= »Mauvais code » highlight= » » provider= »manual »/]

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.

[pastacode lang= »sass » manual= »%40for%20%24i%20from%201%20through%206%20%7B%0A%09%24n%3A%201.5em%20*%20%24i%3B%0A%09.step%3Anth-child(%23%7B%24i%7D)%20%7B%0A%09%09input%5Btype%3D%22radio%22%5D%3Achecked%20%2B%20label%3Aafter%20%7B%0A%09%09%09width%3A%20calc(100%25%20%2B%20%23%7B%24n%7D)%3B%0A%09%09%7D%0A%09%7D%0A%7D » message= »Bon code » highlight= » » provider= »manual »/]