なぜこれをコンパイルしないのですか？それを修正するために私は何ができますか？このよう

Question

は、と文句を言い、次のとおりです。これは動作するはずのように思え

SyntaxError: error evaluating function darken : a.toHSL is not a function on line 24, column 1:

。私は何を間違えているのですか？どのように私が望む効果を得ることができますか？

@red2: #842211; 
@green2: #842212; 
@blue2: #842213; 

@colors: red2, blue2, green2; 

.color-style-helpers(@colors; @index) when (@index > 0) { 
    .color-style-helpers(@colors; (@index - 1)); 

    @colorName : extract(@colors, @index); 
    @color : ~"@{@{colorName}}"; 
    // @color : #ffffff; // Uncomment this line and this will work 
    @darkColor : darken(@color, 10%);  

    .background-@{colorName} {  
    border-color: @darkColor; 
    background-color: @color; 
    }  
} 


.color-style-helpers(@colors; length(@colors);); 

あなたは問題があなたの例では、コードの下の行にある結果here

Answer 1

を見ることができます。これは、@colorの内容を色の代わりに文字列として扱うようにします。このため、lessコンパイラは、darken関数に必要なHSL値に色を変換できなかったため、エラーが発生します。その代わりの

@color : ~"@{@{colorName}}"; 

、ちょうどダブル@構文を使用します。あなたのケースには、引用符やエスケープ機能は必要ありません。

@color : @@colorName;