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

- policy:
    bindings:
    - members:
      - user:tom@email.com
      role: roles/compute.networkUser
    etag: BwWfgKQuAFg=
  project: projects/800307802527
  resource: //compute.googleapis.com/projects/foo-proj/regions/us-central1/subnetworks/sub1

scss文件

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

Answer 2

谢谢 Sayooj V R ：https://stackoverflow.com/users/10647431/sayooj-v-r

我尝试了上面的方法，但是似乎没有用，但是它使我更加了解scss可以做什么，并且我设法通过下面的代码弄清楚了（woohoo！）：

HTML

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

SCSS

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

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

@for似乎由于某些原因（不确定原因）而无法正常工作，因此我尝试使用@each方法使用另一种循环技术，并且哇啦！

@each的文档在这里：https://sass-lang.com/documentation/at-rules/control/each

将变量从DOM传递到SCSS

2 个答案: