3

次の2つのミックスインを作成しました。

.responsive_color(@color, @response_color, @speed: 0.1s){
     color:                  @color;
    .transition(color, @speed);

    &:hover, &:active, &:focus{
        color:                  @response_color;
    }
}

.responsive_background(@color, @response_color, @speed: 0.1s){
    background-color:       @color;
    .transition(background-color, @speed);

    &:hover, &:active, &:focus{
        background-color:       @response_color;
    }
}

これら2つはほぼ同じなので、次のように組み合わせます。

.responsive(@property, @color, @response_color, @speed: 0.1s){
    @property:              @color;
    .transition(@property, @speed);

    &:hover, &:active, &:focus{
        @property:                  @response_color;
    }
}

これはLESSパーサー（PHPクラス）でエラーを引き起こしませんが、単に無視されます。@{property}と'@{property}'も試しましたが、どちらもエラーが発生します。

@propertyを出力して適切に解析する方法を知っている人はいますか？それとも、不可能なことをしようとしていますか？

4

2 に答える 2

5

簡単な更新。今、機能があります：

プロパティは補間できます。例：@ {prefix} -property：value;
—less.js1.6.0変更ログ

したがって、Less 1.6以降を使用している場合は、実際には次のように実行できます。

@{property}: @response_color;

この素晴らしいSOの答えの詳細情報。

于 2014-08-07T11:20:17.850 に答える
3

あなたを助けるかもしれない同様の質問がここで答えられました。その特定の機能は（まだ）LESS.jsフレームワークにはありませんが、ここで概説するように、少しハックすることで回避できる可能性があります。

プロパティ名を引数としてミックスインに渡す方法

于 2012-06-29T09:02:15.743 に答える