Question

我有一个包含某个百分比形式的字符串值的变量，例如。＆＃39; 10％＆＃39;如果百分比高于＆＃39; 0％＆＃39;，我想使用该值来构建要添加到我的html元素的类名。我认为使用sass循环很容易，但我似乎无法正确构造类名。我认为它看起来像这样。

 @for $i from 1 through 100{
   .highlight-#{$i}% {
       // styling
    }
  }

  .highlight-0% {
      // styling
  }

我尝试了几种变体：

.highlight-#{$i + '%'} { // styling }
.highlight-#{$i}${'%'} { // styling }

我不知道这是否可能，因为＆＃39;％＆＃39;可以保留。

我正在添加html以防万一有人可以建议一种方法来删除那里的％。这是我希望能够做到的：

<tr><td class="pad-10 highlight-${publisher.numViewsPercentage}" align="center">${publisher.numViewsPercentage}</td></tr>

Answer 1

不仅%是Sass中的保留字符，更大的问题是它不是CSS选择器名称中允许的字符。因此，即使您可以使Sass编译，结果类名称也将无效并且不起作用。

大多数情况下，选择器名称只需要使用字母，数字，下划线和连字符。

.nopercent {
  color: red;
}

.percent% {
  color: red;
}

<div class="nopercent">
  An element withOUT a percent sign in the class.
</div>
<div class="percent%">
  An element with a percent sign in the class.
</div>

Answer 2

％是自3.2版以来SASS中的占位符字符。你应该将它用于＆＃34;隐形＆＃34; extendeds。

一个sass选择器可以包含＆＃39;％＆＃39;字符？

2 个答案: