水平列表菜单：计算等于 % 宽度

Question

我对 sass/compass 很陌生，现在我正在尝试使用 mixins。下面的示例显示了一个简单的带状样式水平菜单的代码，它已经继承了 @include Horizo​​ntal-list mixin，并与 compass 捆绑在一起。

这个静态菜单有四个列表项，因此我将 li 宽度设置为 25%

我的问题。 Compass 是否有一种方法可以为具有未定义项目数的动态菜单中的列表项计算相等的百分比宽度值？

类似，总 li/100 = x% li 宽度

    @mixin ribbon-menu {

        ul {
            padding: 0;
        }
        li {
            width: 25%;  
            border-right: 1px solid $white;
            text-align: center;
        }
        li.last { 
            border-left: 0;
        }
        li.leaf {
            padding: 0;
        }
        a {
            display: block;
            text-decoration: none;
            padding: 10px;
            color: $white;
        }
        a:link, a:visited {
            background: $black;
        }
        a:active, a:hover, a:focus {
            background: $red;
        }
}

Answer 1

希望这会对你有所帮助。

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

@for $i from 1 through 4 {
   li:first-child:nth-last-child(#{$i}),
   li:first-child:nth-last-child(#{$i}) ~ li {
   width: 100% / $i }
 }