2

定义供应商的 mixin 是 LESS 下的常见任务，即：

.box-shadow() {
    -moz-box-shadow:@arguments;
    -webkit-box-shadow:@arguments;
    -o-box-shadow:@arguments;
    -ms-box-shadow:@arguments;
    box-shadow:@arguments;
}

.border-radius() {
    -moz-border-radius:@arguments;
    -webkit-border-radius:@arguments;
    -o-border-radius:@arguments;
    -ms-border-radius:@arguments;
    border-radius:@arguments;
}

...

不过好像有点重复……

我想要的是一个通用的vendormixin，它为我做这件事，即：

.vendors(@prop, @val) {
    -moz-@prop:@val;
    -webkit-@prop:@val;
    -o-@prop:@val;
    -ms-@prop:@val;
    @prop:@val;
}

然后定义box-shadowmixin 就像这样简单：

.box-shadow() {
    .vendors(box-shadow, @arguments);
}

问题是我的.vendorsmixin没有编译...

我试过：

.vendors(@prop, @val) {
    -moz-@prop: @val;        /* Error */
    ~"-moz-@{prop}": @val;   /* Error */
    ~`"-moz-@{prop}": @val;  /* Error */
}

你知道如何做到这一点吗？

干杯

4

3 回答 3

4

Stylus有这个，称为Interpolation，例如：

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

box-shadow()
  vendor('box-shadow', arguments)

- 然后，

button
  border-radius 1px 2px / 3px 4px

产生于：

button {
  -webkit-border-radius: 1px 2px / 3px 4px;
  -moz-border-radius: 1px 2px / 3px 4px;
  border-radius: 1px 2px / 3px 4px;
}

\o/

于 2011-10-05T19:43:02.743 回答
0

另一个我认为更简洁的选择是创建供应商列表，然后遍历该列表以创建您想要的特定样式。这是一个例子：

ALLVENDORS = webkit moz o ms w3c

vendors(prop, args)
  for vendor in ALLVENDORS
    if vendor == w3c
      {prop}: args
    else
      -{vendor}-{prop}: args

这将创建您想要支持的供应商列表，然后允许您重复使用它们。如果稍后，您决定要支持另一个前缀或要删除一个，您所要做的就是将其从列表中删除。

然后您将使用如上所示的列表：

border-radius()
  vendors(border-radius, arguments)

box-shadow()
  vendor(box-shadow, arguments)
于 2013-11-06T02:21:07.397 回答
0

我很确定现在更少了。我在 Meteor.js 项目中使用了这段代码：

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

.vertical-align {
  position: relative;
  top: 50%;
  .vendor(transformY, -25%);
}
于 2015-05-19T12:52:54.243 回答