Передать переменную из DOM в SCSS

Question

Я использую angular с .s css, и я хотел бы знать, как вместо этого сделать .less код в .s css.

HTML

<span class="flag-icon-{{territoryId}}"></span>

CSS

.flag-icon-@{country} {
  //@country being the {{territoryId}} from above
}

Возможно ли это?

Answer 1

HTML

<span class="flag-icon-{{territoryId}}"></span>

с css файл

$country-collection: ('india', 'usa', 'germany', 'pakistan');

@for $country from 0 to length($country-collection) {
    .flag-icon-#{$country} {
        color: red;
    }
}

Answer 2

Спасибо Sayooj VR : { ссылка }

Я попробовал ваше выше, но это не сработало, но дало мне больше знаний о что я могу сделать с scss, и мне удалось выяснить это (woohoo!) с кодом ниже:

HTML

<span class="flag-icon-{{territoryId}}"></span>

S CSS

$country-collection: ('india', 'usa', 'germany', 'pakistan');

@each $country in $country-collection {
    .flag-icon-#{$country} {
      color: red
    }
}

Кажется, что @for почему-то не работает (не знаю почему), поэтому я попробовал другую технику l oop с использованием метода @each, и это сработало!

Документация для @each находится здесь: https://sass-lang.com/documentation/at-rules/control/each