SCSS : Comment concaténer des règles avec le même style ?

Question

Ce code SCSS

@for $i from 1 through 2 {
  .style-#{$i} { 
  position: relative;
  }
}

génère une telle sortie CSS :

.style-1 {
  position: relative;
}    

.style-2 {
  position: relative;
}

Et je veux qu'il en soit ainsi :

.style-1, .style-2 {
  position: relative;
}    

Comment s'y prendre utiliser un cycle en SCSS ?

Answer 1

Vous pouvez utiliser Sélecteur de placeholder aux règles de groupe.

Sass prend en charge un type spécial de sélecteur appelé "placeholder" (placeholder). placeholder". Ils ressemblent aux sélecteurs class et id, sauf que le # ou le . est remplacé par %. Ils sont destinés à être utilisés avec la directive @extend. En soi, sans l'utilisation de @extend, les jeux de règles qui utilisent des sélecteurs de type ne seront pas rendues en CSS.

Sassmeister Démonstration .

Scss :

%common {
  position: relative;
}

@for $i from 1 through 2 {
  .style-#{$i} { 
    @extend %common;
  }
}

Sortie Css :

.style-1, .style-2 {
  position: relative;
}

Answer 2

Une approche légèrement différente, mais vous pouvez accomplir ceci avec une liste SASS :

/* SASS Input */    
$numbers: "1","2","3","4","5";
$selector: ();

@each $num in $numbers {
    $selector: append($selector, unquote('.style-#{$num}'), 'comma');
}

#{$selector} {
  position:relative;
}

/* CSS Output */
.style-1, .style-2, .style-3, .style-4, .style-5 {
    position: relative;
}