0

私は、より少ない変数を作成するだけのヘルパーファイルを作成しようとしています。パラメータ化されたミックスインを使用してこれを行い、繰り返しエラーが発生しやすいコードの量を削減できるようにしたいと考えています。私は答えを探していましたが、まだ何も見つからなかったので、これが可能かどうか疑問に思っています。

私の目標:

たとえば、特定の形式で名前が付けられた一連の変数を定義するには

@MyVar-foo1-bar1
@MyVar-foo1-bar2
@MyVar-foo1-bar...
@MyVar-foo1-barN
@MyVar-foo2-bar1
@MyVar-foo2-bar2
@MyVar-foo2-bar...
@MyVar-foo2-barN
@MyVar-foo(...)-bar(xxx)
@MyVar-fooN-barN

何百もの変数を宣言する可能性があることを考えると、これはすぐに退屈になります。ミックスインを使用して反復することで、明らかに大幅に簡素化できます。例えば..

(私はそれを動作させることができないので、疑似コードのみ)

.mymixin (@part1){
    @{MyVar-@{part1}-bar1: value-one;
    @{MyVar-@{part1}-bar2: value-two;
    @{MyVar-@{part1}-bar3: value-three;
    @{MyVar-@{part1}-bar4: value-four;
}
.mymixin(foo1);
.mymixin(foo2);

結果は何も出力されませんが、後で使用するために次の変数を定義する必要があります。

@MyVar-foo1-bar1: value-one
@MyVar-foo1-bar2: value-two
@MyVar-foo1-bar3: value-three
@MyVar-foo1-bar4: value-four
@MyVar-foo2-bar1: value-one
@MyVar-foo2-bar2: value-two
@MyVar-foo2-bar3: value-three
@MyVar-foo2-bar4: value-four

これらを手動で作成した後 (ugh)、後でミックスインを使用して簡単に使用できます。

.useMyVars(@myClass) {
    (~".@{myClass} #id1"){
        cssparameter:~"@{MyVar-@{myClass}bar1}";
    }
    (~".@{myClass} #id2"){
        cssparameter:~"@{MyVar-@{myClass}bar2}";
    }
    (~".@{myClass} #id3"){
        cssparameter:~"@{MyVar-@{myClass}bar3}";
    }
    (~".@{myClass} #id4"){
        cssparameter:~"@{MyVar-@{myClass}bar4}";
    }
}
.useMyVars(foo);

結果:

.foo #id1{
    cssparameter:value1;
}
.foo #id2{
    cssparameter:value2;
}
.foo #id3{
    cssparameter:value3;
}
.foo #id4{
    cssparameter:value4;
}

ここで、文字列エスケープなどを使用してみましたが、「:」演算子の左側で使用すると、解析エラーが発生します。

それができないか、何かが足りない:)

4

0 に答える 0