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度创建新条目，但这似乎是一个糟糕的主意。

我的想法是在设置'数据值'的同时为jade mixin中的每个量表定义样式。类似的东西：

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将拥有其前缀：）。

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

1 个答案: