css – 在LESS中,如何进行“规则插值”以生成特定于浏览器的代码？

2019年8月4日 229次阅读

参见英文答案 >
@ sign and variables in CSS keyframes using LESS CSS                                    3个

我正在使用新的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},但是当与@keyframes或@ -moz-keyframes一起使用时会抛出编译错误

我对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)
}

和LESS将生成所有3个选择属性块

我想知道是否有人知道采用不同的方法来完成这项工作.先感谢您.

我目前正在使用lessc 1.3.3,但欢迎使用1.4.0以下的解决方案.

最佳答案 从技术上讲,这不是“选择器插值”,而是“规则插值”.

@rules严格来说不是选择器,所以不支持.我相信现有的功能请求,如果不是随意创建一个.

点赞