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

...

でもちょっとリピートしそう…

私が望むのは、vendor私のためにこれを行う一般的なミックスインです。

.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ミックスインがコンパイルされないことです...

私は試した：

.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

今は持っている人が少ないと確信しています。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 に答える
0

少しきれいだと思う別のオプションは、ベンダーのリストを作成し、そのリストを繰り返し処理して、必要な特定のスタイルを作成することです。次に例を示します。

ALLVENDORS = webkit moz o ms w3c

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

これにより、サポートしたいベンダーのリストが作成され、それらを再利用できるようになります。後で、別のプレフィックスをサポートするか、1 つを削除することにした場合は、リストから削除するだけです。

次に、上記のようにリストを使用します。

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

box-shadow()
  vendor(box-shadow, arguments)
于 2013-11-06T02:21:07.397 に答える