Angular 将变量从DOM传递到SCSS

我将angular与.scss一起使用，我想知道如何在.scss中使用更少的代码

HTML

这可能吗？

HTML

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

---

谢谢你sayoj V R：

我尝试了上面的方法，但似乎不起作用，但它让我更加了解如何使用

scss

，我用下面的代码设法解决了（呜呜！）：

HTML

因为某种原因，@for似乎不起作用（不知道为什么），所以我尝试了一种不同的循环技术，使用

@each

方法，结果它起了作用

---

@each

的文档在这里：

谢谢你的回答，它不太管用！但我设法找到了它，它与下面的代码工作！非常感谢你！

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

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

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

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

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

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

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