2016-10-10 92 views
0

子女的数目我在SASS以下媒体查询创建响应菜单:jsFiddle集媒体查询基于使用SASS

它的伟大工程,但我想提出基于@media查询变化max-width财产有多少菜单项,例如有这样的事情:

@function calculateWidth($element) { 
    @return $element.width; // return actual width (if possible?) 
    // or, return something like: 
    @return 50px * $element.children.length; 
} 

@media (max-width: calculateWidth('.vm-menu')){ 
    //.... whatever goes inside the query .... 
} 

这是可能与单独SASS?或者SASS/JS组合?

我需要这个的原因是,菜单中的项目数量因登录用户的权限而异。因此,我可以将其设置为可能的菜单项的最大数量,但对于显示3-4个项目的人来说,半空菜单崩溃时看起来很尴尬。

回答

0

我不认为CSS可以知道孩子的元素,sass编译为CSS,所以它遵循相同的规则。最好编辑你的html服务器端,或者用javascript添加类。例如给菜单一类.has-4-children,然后写sass类似...

.menu 
    &.has-4-children 
    // Styles here