html - scssでliタグの数を自動検出する方法

Question

このようにヘッダーにナビを書いています。

<div id="navi">
  <ul class="menu">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
  </ul>
</div>

そして、これがscssファイルです。

$navi_items: 5;
#navi{
  width: $page_width;
  margin: 0 auto;
  ul.menu{
    li{
      padding:10px;
      width: $page_width/$navi_items - 20 ;
      float:left;
    }
  }
}

ナビゲーションに新しいアイテムを追加するときは、$navi_items値を変更する必要があります。Liの数を自動検出してscssに反映させることはできますか？

私はjavascriptでそれを行うことができることを知っています。しかし、scssでそれを行う方法を知りたいです。

Answer 1

これは不可能です。

SCSS は、DOM と対話するように設計されていない純粋な CSS にコンパイルされます。

唯一の可能性は、より良い CSS を選択するか、何らかの JS を作成することです。