将变量从 DOM 传递给 SCSS

Question

我在 .scss 中使用 angular，我想知道如何在 .scss 中执行以下 .less 代码。

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>

.scss 文件

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

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

Answer 2

谢谢Sayooj VR ： https : //stackoverflow.com/users/10647431/sayooj-vr

我试过你上面的，但它似乎没有用，但它让我对我可以用scss做什么有了更多的了解，我设法用下面的代码弄清楚了（呜呼！）：

HTML

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

社会保障局

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

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

@for 似乎由于某种原因（不知道为什么）不起作用，所以我使用@each方法尝试了不同的循环技术，并且 walaaaah 它起作用了！

@each的文档在这里： https : @each