Sassセレクタに '％'文字を含めることはできますか？

Question

私はあるパーセントのような形で文字列値を含む変数を持っています。 '10％ 'パーセンテージが' 0％ '以上の場合、その値を使用してHTML要素に追加するクラス名を作成します。私はこれが簡単なループを使用して簡単だと思ったが、クラス名が正しく構築されているように見えない。 私はこれがこのように見えると思った。

@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のプレースホルダ文字です。 「目に見えない」拡張機能に使用するだけです。