Question

有没有办法用罗盘（CSS Framework）获取预定义的元素？

让我们说：

<ul>
    <li class="class-1">foo</li>
    <li class="class-2">foo</li>
    <li class="class-3">foo</li>
</ul>

我想输出的是：

ul > li {
    position: absolute;
    top: 0; left: 50%;
}

ul > li.class-1 { width: 20px; margin-left: -10px; }
ul > li.class-2 { width: 26px; margin-left: -8px; }
ul > li.class-3 { width: 24px; margin-left: -12px; }

如果可能的话，我想我必须做类似的事情：

ul > li {
    position: absolute;
    top: 0; left: 50%;

    &.class-1 { width: 20px; }
    &.class-2 { width: 16px; }
    &.class-3 { width: 24px; }        

    @for $i from 1 through 3 {
        .class-#{$i} { margin-left: $item-width / 2; }
    }
}

但$item-width自然没有被定义。在上述情况下有没有办法计算它？

Answer 1

我认为不可能引用预定义的元素，因为没有预定义的元素......换句话说，所有元素都是由您定义的。

所以最简单的方法就是创建一个包含如下的mixin

@mixin counter($num) {
    width: $num+px; margin-left: - $num/2+px; 
}

ul < li {
    position: absolute;
    top: 0; left: 50%;

    &.class-1 { @include counter(20); }
    &.class-2 { @include counter(16); }
    &.class-3 { @include counter(24); }
}

希望这对某些人有帮助，因为我发现它已经很老了。

用指南针获取元素宽度

1 个答案: