通用“供应商”混合

Question

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

...

但似乎有点重复...

---

我想要的是一个通用的 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 有这个，叫做 插值，例如：

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%);
}