如何在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 被编译成纯 CSS，它不是为与 DOM 交互而设计的。

唯一的可能是选择更好的 CSS 或创建一些 JS。