22

I currently have a mixins.less file, where almost all mixins are basically the same:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
   -khtml-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box-shadow(@value) {
  -webkit-box-shadow: @value;
   -khtml-box-shadow: @value;
     -moz-box-shadow: @value;
          box-shadow: @value;
}

Is there a way to create some kind of generic mixin, that I could call like this:

.vendor('border-radius', '3px');
.vendor('box-shadox', '10px 10px');

and which would produce the same result as above?

4

1 回答 1

40

注意:

建议停止依赖这种技术并考虑使用专用的前缀工具(例如Autoprefixer、 -prefix -free等)。如今,通过 CSS 预处理器 mixins(Less、SCSS 或其他)对供应商前缀进行硬编码是一种纯粹的反模式,并且被认为是有害的。自动前缀工具将使您的代码干净、可读、面向未来且易于维护/可定制。

参见例如:less-plugin-autoprefix


原答案:

好吧,目前 LESS 不支持“属性名称插值”,因此您不能在属性名称中使用变量。但是有一个技巧:如何在 less 中将属性名称作为参数传递给 mixin 所以如果你不介意输出 CSS 中的“虚拟”属性,那么我们开始吧:

.property_(@property, @value) {
    _: ~"; @{property}:" @value;
}

.vendor(@property, @value) {
    .property_('-webkit-@{property}', @value);
    .property_( '-khtml-@{property}', @value);
    .property_(   '-moz-@{property}', @value);
    .property_(          @property,   @value);
}

#usage {
    .vendor(border-radius, 3px);
    .vendor(box-shadow, 10px 10px);
}

输出:

#usage {
  _: ; -webkit-border-radius: 3px;
  _: ; -khtml-border-radius: 3px;
  _: ; -moz-border-radius: 3px;
  _: ; border-radius: 3px;
  _: ; -webkit-box-shadow: 10px 10px;
  _: ; -khtml-box-shadow: 10px 10px;
  _: ; -moz-box-shadow: 10px 10px;
  _: ; box-shadow: 10px 10px;
}

更新:

Less v1.6.0 引入了Property Interpolation功能,所以现在您不再需要任何 hack:

.vendor(@property, @value) {
    -webkit-@{property}: @value;
     -khtml-@{property}: @value;
       -moz-@{property}: @value;
            @{property}: @value;
}

#usage {
    .vendor(border-radius, 3px);
    .vendor(box-shadow, 10px 10px);
}
于 2013-09-01T12:54:24.593 回答