在LESS中，如何做“按规则插值”来生成浏览器特定的代码？
在LESS中，如何做“按规则插值”来生成浏览器特定的代码？
提问于 2013-04-07 11:53:08
我正在使用新的CSS3动画属性，最痛苦的部分是，对于每个颜色效果，您必须拥有完整的
@keyframes greenEffect {
.effect(@green)
}
@-moz-keyframes greenEffect /* Firefox */ {
.effect(@green)
}
@-webkit-keyframes greenEffect /* Safari and Chrome */ {
.effect(@green)
}现在，当我有16种颜色时，我真的不想复制+粘贴16个代码块。16行就足够糟糕了。
为了减少工作量，我需要找到一种使用@rule进行选择器插值的方法
我发现选择器插值语法是1.3.1之后的@{VARIABLE-NAME}，但当它与@keyframe或@-moz-keyframe一起使用时会抛出编译错误
我对LESS非常陌生，所以我尝试了一些东西，比如
.xBrowserEffect (@color, @className){
@keyframes @{className} {
.effect(@color)
}
@-moz-keyframes @{className} /* Firefox */ {
.effect(@color)
}
@-webkit-keyframes @{className} /* Safari and Chrome */ {
.effect(@color)
}
}有了这个，我希望能够执行
.greenEffect{
.xBrowserEffect (@green, greenEffect)
}更少的将生成所有3个选择的属性块
我想知道是否有人知道一种不同的方法来完成这项工作。提前谢谢你。
我目前使用的是lessc 1.3.3，但欢迎使用低于1.4.0的任何解决方案。
Stack Overflow用户
发布于 2013-04-07 13:14:14
从技术上讲，这不是“选择器插值”，而是“按规则插值”。
严格地说，@rule不是选择器，所以这不受支持。我相信有现有的功能需求，但如果不能自由创建一个。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15858684
复制相关文章
相似问题
腾讯云开发者
