通用`vendors'mixin

问题描述

在LESS下，定义供应商的混合是常见的任务，即:

Defining vendors' mixins is common task under LESS, ie:

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

...

但似乎有点重复...

But it seems a bit repeating...

我想要的是一个通用的vendor mixin，它可以为我执行此操作，即:

What I would like is a generic vendor mixin which do this for me, ie:

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

然后定义box-shadow mixin会很简单:

Then defining box-shadow mixin would as simple as:

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

---

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

---

The problem is my .vendors mixin does not compile...

我尝试过:

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

您对如何执行此操作有想法吗?

Do you have an idea on how to do this?

欢呼

推荐答案

手写笔具有此功能，即称为插值，例如:

Stylus has this, which is called Interpolation, eg:

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/

这篇关于通用`vendors'mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！