Блог

Возможно ли иметь такой класс с частичным именем, как этот

 .theme-color- {
  amp;yellow {
    color: yellow
  }
  amp;red {
    color: red
  }
  amp;blue {
    color: blue
  }
}
 

но общий способ, подобный этому

 $yellow = yellow;
$red = red;
$blue = blue;

.theme-color-#{$my-color} {
  color: #{$my-color};
}
 

 <div class="theme-color-red"></div>
 

Вы можете использовать @each :

 $colors: red, yellow, blue;

@each $color in $colors {
  .theme-color-#{$color} {
    color: $color;
  }
}
 

Это генерирует следующий CSS:

 .theme-color-red {
  color: red;
}

.theme-color-yellow {
  color: yellow;
}

.theme-color-blue {
  color: blue;
}
 

Вы также можете использовать @each с картой вместо списка, если хотите указать пользовательские значения цвета:

 $colors: (red: '#ff0000', yellow: '#fffd62', blue: '#0000ff');

@each $color, $hex in $colors {
  .theme-color-#{$color} {
    color: $hex;
  }
}
 

Что приводит к следующему CSS:

 .theme-color-red {
  color: "#ff0000";
}

.theme-color-yellow {
  color: "#fffd62";
}

.theme-color-blue {
  color: "#0000ff";
}