sass选择器能包含'%‘字符吗？

Question

我有一个变量，它包含一个字符串值，以某种百分比的形式表示。'10%‘我想使用这个值来构建一个类名来添加到我的html元素中，如果百分比高于'0%’。我认为使用sass循环很容易，但我似乎无法正确构造类名。我以为它会像这样。

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

  .highlight-0% {
      // styling
  }

我试过几种变体：

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

我不知道这是否可能，因为'%‘可能是保留的。

我正在添加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中的占位符字符。您应该将它用于“不可见的”扩展。