for CSS 选择器名称的手写笔循环

Question

我正在使用手写笔，我正在寻找一个函数来获得以下结果：

.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

你有点想多了。给所有元素相同的 class of .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%;
}

Answer 2

您可以在您的案例中使用 +cache 混入：

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)

这将加入您想要的选择器，因为它会为每个新值生成一个 class，然后对于每个重复值，它只会 @expand 现有的 class而不是写一个新的。

注意你是如何传递你想要 +cache 的密钥的，所以你需要首先存储它，这样你就可以在缓存调用和稍后的left 声明。

for CSS 选择器名称的手写笔循环

for loop in stylus for CSS selector name

stylus