1

LESS CSS を使用して、Mixins を使用して "out" トランジション宣言を配置することでコードを簡素化したいのですが、次の構文は間違っています。問題は、2 つの引数を持つ属性@color-time定義にあります。

.links-transition (@color-time:color 1s, border-color 1s)
{
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a
{
  color:red;
  .links-transition;
}

公式ドキュメント;では、末尾に a を配置することで、引数を で区切られていることを考慮して、LESS に引数を考慮する方法を教えていることがわかりました;。

.links-transition (@color-time:color 1s, border-color 1s;)

残念ながら、これは実行されません。空白なので依存すると思います... Mixinのリコールで2つの引数を使用せずに正しいCSSを取得する正しい構文はありますか?

ありがとうございました。

4

1 に答える 1

2

次のように、文字列のエスケープと補間を使用できます。

.links-transition (@arg:"color 1s, border-color 1s") {
  @color-time: ~"@{arg}";
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a {
  color:red;
  .links-transition ("color 2s, border-color 2s");
}

このCSSを返します:

a {
  color: red;
  -webkit-transition: color 2s, border-color 2s;
  -moz-transition: color 2s, border-color 2s;
  -ms-transition: color 2s, border-color 2s;
  -o-transition: color 2s, border-color 2s;
  transition: color 2s, border-color 2s;
}

これがあなたが望むことを願っています。

より多くのアイデアについて: たとえば、次の 2 つのように、SO で見つけることができるいくつかの追加のアプローチ/ソリューションがあります。

更新: LESS 1.4 ベータ版では、希望どおりに動作します。

.links-transition (@color-time: color 1s, border-color 1s;) {
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a {
  color:red;
  .links-transition (color 2s, border-color 2s;);
}

上記のソリューションと同じ出力があります。1.3.2 以降ではカンマ区切りの引数が可能ですが、明らかに空白を含めることはできません。

于 2013-05-15T13:55:22.150 に答える