Question

我正在使用手写笔和Im寻找功能以获得以下结果：

.post_1,.post_4,.post_7,.post_10,.post_13,.post_16,.post_19,.post_22 {
    left:0%;
}
.post_2,.post_5,.post_8,.post_11,.post_14,.post_17,.post_20,.post_23 {
    left:33.33%;
}
.post_3,.post_6,.post_9,.post_12,.post_15,.post_18,.post_21,.post_24 {
    left:66.66%;
}

这是我的尝试

post_class(a,b)
    for i in (0..a - 1)
        for u in (1..b)
            .post_{a * u + i - (a - 1)}
                left floor(i*(100/a)%,2)

post_class(3,8)// 3 columns, 8 rows

这给了我想要的CSS，但所有选择器都具有相同的属性（在这种情况下保留其值，在这种情况下）。

.post_1 {left: 0%;}
.post_4 {left: 0%;}
.post_7 {left: 0%;}
.post_10 {left: 0%;}
.post_13 {left: 0%;}
.post_16 {left: 0%;}
.post_19 {left: 0%;}
.post_22 {left: 0%;}
.post_2 {left: 33.33%;}
.post_5 {left: 33.33%;}
.post_8 {left: 33.33%;}
.post_11 {left: 33.33%;}
.post_14 {left: 33.33%;}
.post_17 {left: 33.33%;}
.post_20 {left: 33.33%;}
.post_23 {left: 33.33%;}
.post_3 {left: 66.66%;}
.post_6 {left: 66.66%;}
.post_9 {left: 66.66%;}
.post_12 {left: 66.66%;}
.post_15 {left: 66.66%;}
.post_18 {left: 66.66%;}
.post_21 {left: 66.66%;}
.post_24 {left: 66.66%;}

我只能想到循环选择器的名称，我试过没有运气（抛出错误）。有可能实现我正在寻找的东西吗？（为了澄清，我正在寻找一种简化结果CSS的方法）

Answer 1

您可以在案例中使用+cache mixin：

post_class(a,b)
    for i in (0..a - 1)// 3 columns
        for u in (1..b)
            .post_{a * u + i - (a - 1)}
                $left = floor(i*(100/a)%,2)
                +cache($left)
                  left: $left

post_class(3,8)

这会加入你喜欢的选择器，因为它会为每个新值生成一个类，然后对于每个重复值，它只会@expand现有的类，而不是写一个新的。< / p>

请注意您如何传递您希望基于+cache的密钥，因此您首先需要存储它，因此您可以在缓存调用中重复使用它稍后在left声明中。

Answer 2

你有点过分了。将所有元素设为同一类.post，然后在CSS中使用nth-child：

// For the 2,5,8 series
.post:nth-child(3n+2) {
  left: 0%;
}

// For the 1,4,7 series
.post:nth-child(3n+1) {
  left: 33.3%;
}

// For the 3,6,9 series
.post:nth-child(3) {
  left: 66.66%;
}

for stylus for CSS选择器名称的循环

2 个答案: