Question

定义供应商的mixins是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;
}

...

但似乎有点重复......

我想要的是一个通用vendor mixin为我这样做，即：

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

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

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

问题是我的.vendors mixin无法编译......

我试过了：

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

您对如何做到这一点有所了解吗？

干杯

Answer 1

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 /

Answer 2

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

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)

Answer 3

我很确定现在少了。我在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%);
}

通用`供应商`mixin

3 个答案: