Formation Prestashop intégrateur: Sass / @each - les listes

Vous êtes ici : Accueil / Prestashop intégrateur / Sass / @each - les listes


@each - les listes

@each vous permet de traiter les éléments d'une liste.

Exemple :

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

Résultat CSS après compilation :

.puma-icon {background-image: url('/images/puma.png');}
.sea-slug-icon {background-image: url('/images/sea-slug.png');}
.egret-icon {background-image: url('/images/egret.png');}
.salamander-icon {background-image: url('/images/salamander.png');}