SASS：クラス名の数値に基づいて属性を計算する方法はありますか？

Question

私は角度グリッドを使用しています。私は、データが行に入れ子になっているデータテーブルを持っていて、入れ子にされた行レベルの数は、いつでもデータに依存しています。

.ag行レベル-1

.ag行レベル-2

.ag行レベル-3

：したがって、私は、次のようなCSSクラスを持っています

潜在的な行レベルがいくつあるかわからないので、行レベルによってはパディングを適用したいと思います。そのような何かをSCSS/SASSに、可能である：

.ag-行、レベル$レベル{ パディング左：$レベル* 20ピクセル }セレクタは、すべてのクラスを識別する

その.ag-row-level-とpadding-leftはクラス名の実際の行レベルに基づいて計算されますか？

ありがとうございます！

Answer 1

正確ではありません。次のようなものが動作します：

...をサポートする最大数で置き換えます。これは実際にこの例に関して何かしたいことがあれば十分です。

この機能はSASSにはないのはなぜですか？

よくSASSはCSSプリプロセッサです。それ以上はない。つまり、Sassコンパイラは有効なCSSを生成し、CSSはその機能を持っていません。そのコンパイラはHTMLについては全く知らないので（実際には、HTML生成技術がたくさんあるため、見つけ出すのには良い方法ではありません）、必要なCSSをすべて生成することはできません。

しかし、これは

さてあなたはJavascriptを使用して問題を回避することができます十分ではありません。それはむしろ不要であり、私はあなたのケースのための最初の例と一緒に行くお勧めしますが、それが動作しない場合、あなたはこのような何か行うことができます。

function parseLevels() { 
 
    /* call this function whenever you need to update it */ 
 
    const paragraphs = document.getElementsByClassName('ag-row'); 
 
    for (let i = 0; i < paragraphs.length; ++i) { 
 
    paragraphs[i].style.paddingLeft = (20 * paragraphs[i].dataset.level) + "px"; 
 
    } 
 
} 
 

 
parseLevels();

<div class="ag-row" data-level="1">lorem</div> 
 
<div class="ag-row" data-level="2">lorem</div> 
 
<div class="ag-row" data-level="3">lorem</div> 
 
<div class="ag-row" data-level="4">lorem</div> 
 
<div class="ag-row" data-level="5">lorem</div> 
 
<div class="ag-row" data-level="4">lorem</div> 
 
<div class="ag-row" data-level="5">lorem</div> 
 
<div class="ag-row" data-level="3">lorem</div> 
 
<div class="ag-row" data-level="10">lorem</div>