Pass sass variable à l'intérieur de la boucle comme un sélecteur sans valeur

Question

Je veux utiliser un mixin pour me donner l'option de passer des sélecteurs supplémentaires en tant que paramètres nécessaires, en plus des sélecteurs déjà établis. Mais je reçois une erreur ici. Je ne suis pas sûr de ce qui me manque, à moins que vous ne puissiez pas utiliser des variables à l'intérieur d'une boucle sans passer une valeur à chaque élément et que je me trompe.

@mixin light-section-text($selectors: null) { 

    @if ($selectors) { 
    @for $i from 1 through length($selectors) { 
     #{nth($selectors, $i)}, 
    } 
    } 
    p, 
    address, 
    li { 
    color: $white; 
    } 
} 

La sortie souhaitée de @include light-section-text("body", "strong", "strong a"); dans ce cas serait:

body, 
strong, 
strong a, 
p, 
address, 
li { 
    color: #fff; } 

Answer 1

Tout d'abord, vous ne pouvez pas passer directement la liste des sélecteurs à la fonction mixin car elle entraînerait sélecteurs $ pour être le premier chaîne. Vous devez donc d'abord déclarer une variable de liste, puis passer cette variable à la fonction. Deuxièmement, vous devez simplement utiliser la fonctionnalité Placeholders proposée par Sass qui utilise @extend et le caractère %.

%color{ 
    color: white; 
} 
@mixin light-section-text($selectors: null) { 

    @if ($selectors) { 
     @for $i from 1 through length($selectors) { 
     #{nth($selectors, $i)}{ 
      @extend %color; 
     } 
     } 
    } 
    p, 
    address, 
    li { 
    @extend %color; 
    } 
} 
$list-variable: "body", "strong", "strong a"; 

@include light-section-text($list-variable); 

Autre méthode

Vous ne même pas besoin d'utiliser la fonction mixin que cette tâche peut être gérée par l'espace réservé SASS seul.

$white : white; 

%color{ 
    color: $white; 
} 
$list-variable: "body", "strong", "strong a", "p", "address", "li"; 

@each $item in $list-variable { 
    #{$item} { 
     @extend %color; 
    } 
}