css - nth-child セレクターでの SASS コンパイル エラー

Question

ここで少し調べてみたのですが、答えが見つからなかったので、ここの誰かが助けてくれることを願っています...

次のSASSコードがあります

$column: 7;

table
{
  th:nth-child($column) 
  {
    // This does NOT compile
  } 
  th:nth-child(7) 
  {
    // This does compile
  }
}

nth-child セレクターを変数と組み合わせて使用​​すると、SASS 内でコンパイルされないのはなぜですか? nth-child セレクターで動的な値を使用する方法はありますか?

Answer 1

変数は、セレクターと共に使用する場合 (例えば、機能的な疑似クラスへの引数として)補間する必要があります。あなたの場合、構文は次のようになります。

$column: 7;

table
{
  th:nth-child(#{$column})
  {
    // ...
  }
}