Question

我在SASS中有以下媒体查询来创建响应式菜单：jsFiddle

效果很好，但我想基于有多少菜单项来制作@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个项目的人半空菜单崩溃时，它看起来很尴尬。

Answer 1

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

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

使用SASS根据子项数设置媒体查询

1 个答案: