在 Stylus 迭代中使用 CSS 变量

Question

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

例如，在像手写笔这样的 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 名称以 -- 开头，则手写笔解析器会抛出错误

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

喜欢

item-count = 5

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