26

LESSでは、次のようなパラメトリックミックスインが可能です。

.transition(@property, @duration){
    transition:         @property @duration;
    -moz-transition:    @property @duration; /* Firefox 4 */
    -webkit-transition: @property @duration; /* Safari and Chrome */
    -o-transition:      @property @duration; /* Opera */
}

ただし、これは遷移などのプロパティで常に機能するとは限りません。複数のトランジションを作成しようとして、ミックスインを複数回呼び出そうとすると、最後のミックスインが以前に定義されたすべてのトランジションをオーバーライドします。これは、複数のトランジションを定義するための適切なCSS3構文が次のとおりであるためです。

... {
    transition: @property1 @duration1, @property2 @duration2, ...;
}

複数のトランジションをミックスインとして定義するために私が考えることができる唯一の方法は、ミックスインをオーバーロードすることです。

.transition(@property, @duration){...}
.transition(@property, @duration, @prop2, @dur2){...}
.transition(@property, @duration, @prop2, @dur2, @prop3, @dur3){...}

可変数の引数を取り込んで適切な遷移CSSを構築するために、遷移ミックスインを定義するより堅牢で簡潔な方法はありますか？

コンテキスト：複数のプロパティに移行したい場合があります。たとえば、:hover背景色、ボックスシャドウ、テキストカラーなどの遷移をトリガーする場合があります。

4

6 に答える 6

32

ここで私の答えを参照してください：複数のプロパティがミックスインで別々の引数として扱われています

概要：可変数の引数にこのミックスインを使用します。

.transition (@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}
于 2012-11-21T09:57:13.270 に答える
22

LESS1.3.3以降の更新

出力は同じですが、エスケープされた文字列を実行する代わりにセミコロンを使用することで、新しいバージョンのLESSでプロパティを渡す方法の違いに注意してください。

@prop1: color;
@prop2: opacity;
@dur1: 3s;
@dur2: 4s;

.transition(@transString: 0) when not (@transString = 0) {
    transition:         @transString;
    -moz-transition:    @transString; /* Firefox 4 */
    -webkit-transition: @transString; /* Safari and Chrome */
    -o-transition:      @transString; /* Opera */
}

.class1 {.transition();}
.class2 {.transition(width 2s, height 2s;);}
                                        ^
                                   semicolon here
.class3 {.transition(@prop1 @dur1, @prop2 @dur2;);}
                                               ^
                                         semicolon here

セミコロンは、コンマがパラメーター区切り文字ではなくリスト区切り記号として評価されるように強制します。

1.3.3より前のLESSの1つのソリューション

の文字列として正しいプロパティ引数を作成しtransition、エスケープされた値（~）演算子を使用して、それを必要な独自の構文に変換します。文字列補間（@{variableName}）を使用することで、プロセスに変数を埋め込むこともできますが、実際の入力はエスケープされた文字列の形式である必要があります。

LESSコード

@prop1: color;
@prop2: opacity;
@dur1: 3s;
@dur2: 4s;

.transition(@transString: 0) when not (@transString = 0) {
    transition:         @transString;
    -moz-transition:    @transString; /* Firefox 4 */
    -webkit-transition: @transString; /* Safari and Chrome */
    -o-transition:      @transString; /* Opera */
}

.class1 {.transition();}
.class2 {.transition(~" width 2s, height 2s");}
.class3 {.transition(~" @{prop1} @{dur1}, @{prop2} @{dur2}");}

CSS出力

注：.class1ガード式は何かが入力されることを保証するため、noが出力されます（ただし、不適切な入力を防ぐことはできません）。

.class2 {
  transition: width 2s, height 2s;
  -moz-transition: width 2s, height 2s;
  -webkit-transition: width 2s, height 2s;
  -o-transition: width 2s, height 2s;
}
.class3 {
  transition: color 3s, opacity 4s;
  -moz-transition: color 3s, opacity 4s;
  -webkit-transition: color 3s, opacity 4s;
  -o-transition: color 3s, opacity 4s;
}
于 2012-07-19T01:22:46.110 に答える
6

LESSでは、コンマまたはセミコロンを使用して引数を区切ることができます。カンマを含む単一の値の場合、次のように、リストを単一の値として送信するために、その単一の値をセミコロンで終了できます。

.class {
  .background-size(100%, auto;);
}

複数の値の場合は、次の構文を使用してください。

/* Example mixin */
.set-font-properties(@font-family, @size) {  
  font-family: @font-family;
  font-size: @size;
}
/* Usage with comma-separated values */
.class {
  .set-font-properties(Arial, sans-serif; 16px);
}

/* Output */
.class {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

簡単ピーシー！

于 2013-05-13T21:00:43.120 に答える
6

注：この回答は、既存の回答が正しくない、または廃止されていると言う目的で追加されたものではありません。すべての答えは有効であり、それでも機能します。これは、私の意見では少し複雑ですが、各引数をキーと値のペアとして言及する方法に関してもより柔軟な、異なる方法を提供するだけです。

この方法を使用する利点：この方法は、値に対して追加の操作を実行する必要がある場合（unitasの追加、追加の数学操作の実行など） deg、pxまたはベンダープレフィックスを動的に追加する必要がある場合にさらに役立ち@propertyます。たとえばtransform、入力プロパティとしてのみミックスインに渡したいが-webkit-transform、-webkit-transitionやなど-moz-transformに追加したい場合があります。-moz-transition

このメソッドでは、...可変数の引数をミックスインに渡し、渡された各引数extract、プロパティの名前、および追加のパラメーター（期間、回転の程度など）をループできる機能を利用します。次に、Lessが提供するマージ機能を使用して、プロパティに指定された値を連結します。

  • プロパティ値をコンマで連結し、+:Lessv1.5.0で導入されました
  • プロパティ値をスペースで連結し、+_:Lessv1.7.0で導入されました。
.transition(@args...){
    .loop-args(@argCount) when (@argCount > 0) {
        .loop-args(@argCount - 1);
        @arg: extract(@args, @argCount);
        @property: extract(@arg,1);
        @duration: extract(@arg,2);
        -webkit-transition+: @property @duration;
        -moz-transition+: @property @duration;
        -o-transition+: @property @duration;
        transition+: @property @duration;
    }
    .loop-args(length(@args));    
}

div{
    .transition(background, 1s; border-color, 2s; color, 2s);
}

.transform(@args...){
    .loop-args(@argCount) when (@argCount > 0) {
        .loop-args(@argCount - 1);
        @arg: extract(@args, @argCount);
        @property: extract(@arg,1);
        @param: extract(@arg,2);
        -webkit-transform+_: ~"@{property}(@{param})";
        -moz-transform+_: ~"@{property}(@{param})";
        -o-transform+_: ~"@{property}(@{param})";
        transform+_: ~"@{property}(@{param})";
    }
    .loop-args(length(@args));    
}

div#div2{
    .transform(rotate, 20deg; scale, 1.5; translateX, 10px);
}

上記のコードをコンパイルすると、次の出力が生成されます。

div {
    -webkit-transition: background 1s, border-color 2s, color 2s;
    -moz-transition: background 1s, border-color 2s, color 2s;
    -o-transition: background 1s, border-color 2s, color 2s;
    transition: background 1s, border-color 2s, color 2s;
}
div#div2 {
    -webkit-transform: rotate(20deg) scale(1.5) translateX(10px);
    -moz-transform: rotate(20deg) scale(1.5) translateX(10px);
    -o-transform: rotate(20deg) scale(1.5) translateX(10px);
    transform: rotate(20deg) scale(1.5) translateX(10px);
}

関連する回答：

  • これは、 seven-phases-maxからの回答です。これは、利点の段落で述べたように、このメソッドを使用してベンダープレフィックスを自動追加する方法について詳しく説明しています。
于 2014-10-04T06:46:35.130 に答える
4

これはうまくいくはずだと思います：

.transition(...) {
    transition:         @arguments;
    -moz-transition:    @arguments; /* Firefox 4 */
    -webkit-transition: @arguments; /* Safari and Chrome */
    -o-transition:      @arguments; /* Opera */
}

...-は有効なless構文であり、置き換えるものではありません。

于 2013-01-07T14:29:49.863 に答える
2

LESS 1.4の時点で、ドキュメント（http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters）はこれを処理する適切な方法を提案しています。

ミックスイン区切り文字としてコンマを使用すると、引数としてコンマ区切りのリストを作成できなくなります。一方、コンパイラがミックスインの呼び出しまたは宣言内に少なくとも1つのセミコロンを検出した場合、引数はセミコロンで区切られ、すべてのコンマはcssリストに属していると見なされます。

具体的には、mixin：

.transition(@prop-or-props) {
    -webkit-transition: @prop-or-props;
       -moz-transition: @prop-or-props;
         -o-transition: @prop-or-props;
            transition: @prop-or-props;
}

使用法：

.transition(opacity .2s, transform .3s, -webkit-transform .3s;);

複数のプロパティはコンマで区切られ、末尾のセミコロンにより、コンマで区切られたリストがミックスインの単一のパラメーターとして扱われることに注意してください。

パラメータを使用してミックスインを定義しrest...、任意の長さの引数の各要素を抽出して個別に処理できるようにするとよいでしょうが、私が考えているユースケースは、遷移を変換するためにベンダープレフィックスを追加することです（単純に.transition(opacity .2s, transform .3s)ビットを-webkit-transform追加して自動的に追加します）そしておそらくこれは別のユーティリティ（たとえば、gulp-autoprefixer）によってより適切に処理されます。

于 2014-06-10T15:02:44.297 に答える