18

ミックスインを作成しようとしていますが、引数を希望どおりに動作させることができないようです。複数のプロパティがそれぞれ個別の引数として扱われています。

現在のコード

.transition(@property: all, @time: 1s, @timing: ease-in-out) {
    -moz-transition: @property @time @timing;
    -webkit-transition: @property @time @timing;
    -o-transition: @property @time @timing;
    transition: @property @time @timing;
}

a {
    .transition(color, opacity, .5s);
}

望ましい出力

a {
    -moz-transition: color, opacity .5s ease-in-out;
    -webkit-transition: color, opacity .5s ease-in-out;
    -o-transition: color, opacity .5s ease-in-out;
    transition: color, opacity .5s ease-in-out; 
}

実際の出力

a {
    -moz-transition: color opacity .5s;
    -webkit-transition: color opacity .5s;
    -o-transition: color opacity .5s;
    transition: color opacity .5s;  
}

何か案は？

4

4 に答える 4

37

LESS のエスケープ機能を使用することをお勧めします。

a:link, a:visited { 
    color: green;
    opacity: .5;
    font-size: 1em;
}

a:hover {
    color: red;
    opacity: 1;
    font-size: 2em;
    .transition(e("font-size, color"));
}

LESS はそれを受け入れているように見えますが、送信したカンマ区切りの文字列の最後のプロパティのみをアニメーション化します。同情。

于 2011-04-02T02:27:14.543 に答える
25

ここにあるソリューションを使用すると、1 つのAND複数の引数で機能します。

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

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}

このように使用します：

.transition(color, opacity .5s ease-in-out);

収量:

-webkit-transition: color, opacity .5s ease-in-out;
-moz-transition: color, opacity .5s ease-in-out;
-ms-transition: color, opacity .5s ease-in-out;
-o-transition: color, opacity .5s ease-in-outt;
transition: color, opacity .5s ease-in-out;
于 2012-11-21T09:53:21.530 に答える
2

セミコロンで区切られた引数 (およびコンマ区切り) を使用できる mixin が少ない。常にセミコロンを使用することをお勧めします。

ミックスインが呼び出されたときに引数のリストにセミコロンが存在する場合、セミコロンの間のすべてが、それらにコンマが含まれていても、引数と見なされます。これにより、カンマ区切りのリストを1 つの引数として渡すことができます。セミコロンが存在しない場合、コンマが引数の区切りとして扱われます。

.transition(@property: all; @time: 1s; @timing: ease-in-out) { // NOTE THE SEMICOLONS
    transition: @property @time @timing;
}

a {
    .transition(color,opacity; .5s); // SEMICOLON AFTER 'opacity'
}
b {
    .transition(color,opacity, .5s); // COMMA INSTEAD
}

出力：

a {
    transition: color,opacity .5s ease-in-out;
}
b { 
    transition: color opacity .5s; // invalid syntax
}

省略形プロパティの構文transitionは、単一遷移のコンマ区切りリストでなければならないことに注意してください。Sobには無効な値がaあり、指定されていない値がデフォルトで初期値に設定される 2 つの遷移があります。

  1. color 0s ease 0s
  2. opacity .5s ease-in-out 0s

これは意図したものではない可能性があります。（あなたが欲しかったようですcolor .5s ease-in-out 0s。opacity .5s ease-in-out 0s）

ここで、「他に引数がない場合、カンマ区切りのリストを 1 つの引数として渡すにはどうすればよいか」と疑問に思われるかもしれません。リストの最後にダミーのセミコロンを追加するだけです。

.transition(@property: all; @time: 1s; @timing: ease-in-out) {
    transition: @property @time @timing;
}

b {
    .transition(color,opacity;); // DUMMY SEMICOLON AFTER ARGUMENT
}
i {
    .transition(color,opacity); // MISSING SEMICOLON
}

出力：

b {
    transition: color,opacity 1s ease-in-out; // 'color,opacity' is the first argument
}
i {
    transition: color opacity ease-in-out; // 'color' is 1st arg, 'opacity' is 2nd arg
}

繰り返しますが、構文 foriは無効であり、b2 つの遷移があります。

  1. color 0s ease 0s
  2. opacity 1s ease-in-out 0s
于 2016-05-04T15:10:23.210 に答える