如何在scss中自动检测li标签的数量 [英] How to auto detect number of li tag in scss

问题描述

 < 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做到这一点。

解决方案

这是不可能的。

SCSS被编译为纯粹的CSS，而不是设计用于与DOM交互。

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

I'm writing navi in header like this.

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

And this is scss file for it.

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

When I add new item in navigation I must change $navi_items value. Is it possible to detect number of li automatically and reflect it in scss?

I know I can do it with javascript. But I want to know how to do it with scss.

解决方案

This is not possible.

SCSS is compiled down to pure CSS which is not designed for interacting with the DOM.

The only possibility would be to either choose a better CSS or to create some JS.

这篇关于如何在scss中自动检测li标签的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！