0

いくつかの基本的なリストをサポートするために、デフォルトの less 関数を拡張しました。次のように指定された関数「nth」を追加しました。

"nth": function(obj, index){
    var list = obj.value.split(",");
    var n = index.value;
    obj.value = list[n-1].trim();
    return new tree.Anonymous(obj);
 }

次に、次のように別の関数「convertstrtovar」を追加しました。

convertstrtovar: function(obj){
     var str = obj.value.toString();
     str = str.replace(/(@)/gi, '');
     str = '~"@{' + str + '}"';
     obj.value = str;
     return new tree.Anonymous(obj);
}

これは '@white' のような String を受け取り、それを ~"@{white}" に変換します。以下に、less mixin のサンプル コードを示します。

@button-text-colors: "@white, @dark, @red"; //parsed as a comma separated list.
@white: white;
@dark: black;
@red: red;

.something(@color){
    color: @color;
}

.some{
    @t: convertstrtovar(nth(@button-text-colors, 1));
    .something(@t);
}

これにより、次のような出力が得られます。

.some {
    color: ~"@{white}";
}

~"@{white}" が文字列として出力され、変数 white として評価されないのはなぜですか?

4

1 に答える 1

1

~"@{white}" が文字列として出力され、通常 ~"@{white}" が変数 white として評価されないのはなぜですか?

LESS は入力を解析するときにそれらを評価するためです (ただし、関数はその後新しい文字列オブジェクトを作成します)。

実際には、デフォルトの LESS 言語構成要素だけで目的を達成できます (カスタム関数のハックは必要ありません)。

@button-text-colors: 'white', 'dark', 'red';
@white: white;
@dark: black;
@red: red;

.something(@color){
    color: @color;
}

.some{
    @t: extract(@button-text-colors, 1);
    .something(@@t);
}

いいえ、真剣に、独自のカスタム関数で拡張しようとする前に、既存の LESS 機能についてもっと学ぶことを検討することをお勧めします... (古い LESS ドキュメントが重大な問題であることは認めざるを得ませんが、少なくともhttps://github.com/SomMeri/less4j/wiki/_pagesを見てください- これは現時点で最も詳細な LESS ドキュメントです)。

于 2013-10-17T06:50:19.163 に答える