4

我正在使用新的 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，但欢迎使用 less 1.4.0 的任何解决方案。

4

1 回答 1

2

从技术上讲，这不是“选择器插值”，而是“规则插值”。

@rules 严格来说不是选择器，所以不支持。不过，我相信对此有现有的功能要求，如果不能随意创建一个。

于 2013-04-07T05:14:13.643 回答