0

编辑：我试图实施 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 中的每个帖子上。我以这段代码在 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 的一部分简单地传输并在将来在缓存中引用它们会更好吗？

提前致谢。

4

1 回答 1

1

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

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

使用笔尖，transform将有其所有前缀:)。

于 2013-04-14T10:13:39.320 回答