Less 通用“供应商”混合

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

...

但它似乎有点重复

---

我想要的是一个通用的

供应商

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

---

问题是我的

。供应商
mixin没有编译

我试过：

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

你有没有办法做到这一点

Cheers有这样一个名字，叫做，例如：

-那么

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/
另一个选项，我认为稍微干净一点，就是创建一个供应商列表，然后迭代该列表以创建您想要的特定样式。下面是一个例子：

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)

我很确定现在少了。我在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中预定义属性的参数。我想less解析器只是不在属性端寻找参数：。。。也许你应该在@cloudhead的git repository上为lessOk开一个罚单，刚刚打开的问题：我最近发现了一个黑客解决方案，尝试将动态生成的厂商前缀属性注入另一个属性（看起来有点混乱，但它生成了可工作的css）：我对它进行了更多的研究，并用一个不会产生不必要的附加属性的解决方案更新了我上面链接的答案。关于插值的Less或Sass实现呢？
.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%);
}