在jade中使用“style='foo'”修改伪元素“:before”相关的css

Question

编辑：我已尝试实施 user1737909 的建议。使用类（即.pie.size-{size}:BEFORE）而不是属性选择器（即.pie[data-value={size}]:BEFORE）已经让我通过了第一步，并且不会阻止.css文件的加载。不幸的是，由于难以将字符串连接到手写笔中的变量，我无法设置旋转量。以下都不起作用。什么是正确的语法？

transform rotate(size+1+'deg')

transform rotate({size}+1+'deg')

foo = size+1+'deg'
transform rotate(foo)

bar = 'rotate('+size+1+'deg)'
transform bar
-webkit-transform bar

如果做不到这一点，有人对制作 css/html 仪表有任何想法吗？

---

我正在 CSS 中制作一个径向量规，它将显示在 mixin 中的每个帖子上。我使用this code 在 CSS 中制作饼图作为示例。设置饼图楔形的值就像更改以下代码中的“数据值”一样简单：

<div class="pie" data-start="0" data-value="30"></div>

可惜代码对应的是静态css：

.pie[data-value="30"]:BEFORE {
    -moz-transform: rotate(31deg); /* Firefox */
    -ms-transform: rotate(31deg); /* IE */
    -webkit-transform: rotate(31deg); /* Safari and Chrome */
    -o-transform: rotate(31deg); /* Opera */
    transform:rotate(31deg);
}

这适用于静态插图，但我的页面会有各种不同大小的楔形。最简单的解决方案是为所有 360 度创建新条目，但这似乎是一个糟糕的主意。

我的想法是在我设置“数据值”的同时定义翡翠混合中每个仪表的样式。比如：

pieStyle = '-moz-tranform: rotate('+ degreesPlusOne + 'deg); -ms-tranform: rotate('+ degreesPlusOne + 'deg); -o-tranform: rotate('+ degreesPlusOne + 'deg); -webkit-tranform: rotate('+ degreesPlusOne + 'deg); tranform: rotate('+ degreesPlusOne + 'deg)'

.pie2(data-start='0', data-value=degrees, style=pieStyle)

不幸的是，要设置的样式不是针对“.pie”，而是针对“.pie:BEFORE”。有什么方法可以在 mixin 中使用这个伪元素设置样式吗？

或者有没有办法在手写笔中解决这个问题？我正在开发的网站是一个新闻聚合器，任何用户都会看到几十个甚至上百个这样的仪表。在这样的环境下，我会在不太长的时间内将所有 360 集作为 css 的一部分简单地传输并在将来在缓存中引用它们会更好吗？

提前致谢。

Answer 1

你绝对可以用手写笔做到这一点

for size in 30 60 180 360
  .pie.size-{size}
    transform: rotate(size+1)

使用 nib，transform 将具有其所有前缀:)。