css - 在 Stylus 迭代中使用 CSS 变量

Question

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

例如，在像 stylus 这样的 CSS 预处理器中:

// want to use this css variable
:root {
  --i-menu-count: 5
}

$item-count = 5
for $i in (1..$item-count) {
  .menu:nth-child({$i}) .menu-title {
    transform: rotate(-180deg / ($item-count - 1) * ($i - 1))
  }
}

是否可以使用 CSS 变量 --i-menu-count 来替换迭代中的 $item-count？

Answer 1

我不确定，但是 - 是运算符，如果您的 var 名称以 -- 开头，stylus 解析器会抛出错误

我建议你用手写笔声明你的计数

喜欢

item-count = 5

for i in (1..item-count)
    .menu:nth-child({i}) .menu-title {
       transform: rotate(-180deg / (item-count - 1) * (i - 1))
    }