與字符串變量串聯，形成另一個變量

@color-purple: "#ffffff" 


@colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey; 


.ColorsMixin(@i:0) when(@i =< length(@colors)){ //loop over icons array 


    @color: extract(@colors, @i); //extract the icon at current index @i 

    [email protected]{color}{ 
     background: @{[email protected]{color}}; 

     &:before{ 
      content: "@{color}"; 
     } 

     &:after{ 
      content: "\@{[email protected]{color}}"; 
     } 

    } 

    .ColorsMixin(@i + 1); 
} 


.ColorsMixin();

所以，我可以得到它做什麼，我想在與字符串變量串聯，形成另一個變量

content: "\@{[email protected]{color}}";

部分做。這將輸出

content: "#ffffff";

然而，當我嘗試輸出@色紫色變量爲背景，LESS拋出一個錯誤。它似乎工作，如果我用引號包裝它，但背景屬性希望十六進制代碼沒有引號周圍。

這裏有什麼竅門？

來源

2017-05-24 nicedevman

background: @{[email protected]{color}};

無效少的語法，適當的一個是：

background: ~'@{[email protected]{color}}';

注意然而，通過escaping間接指的一個變量值的想法是的Durty雜牌（相當廣泛的傳播但仍然非常骯髒）。它可以直接爲CSS屬性賦值，但它會失敗，僅僅因爲這個值不再是一個顏色，而是一個帶有未知內容的未引用字符串... E.g.下面的代碼將失敗：

@color-dark-purple: #321; 

div { 
    @color: 'color-dark-purple'; 
    background: fade(~'@{color}', 50%); // error, not a color value 
}

通過它的名稱得到一個變量值的正確較少的方法是"variable reference"，如：

@color-dark-purple: #321; 

div { 
    @color: 'color-dark-purple'; 
    background: fade(@@color, 50%); // OK, proper color value 
}

此外，需要時間考慮，如果整將所有這些顏色作爲獨特變量，然後單獨列出這些變量名稱的方法實際上就是您所需要的。通常一個單獨的列表同時具有顏色名稱和值並非如此非常膨脹並且更易於維護。

來源

2017-05-24 15:21:57

感謝您的意見。當使用〜'@ {color - @ {color}}'時，我實際上最終得到錯誤; 錯誤提示：未知單詞。顏色 - 提取物（紫色，淺紫色，綠色，淺綠色，紅色，淺紅色，灰色，淺灰色，最淺灰色，0）{ background：@ {顏色提取（紫色，淺紫色，綠色，淺綠色，紅色，淺紅色，灰色，淺灰色，最淺灰色，0）}; （^其中顏色來自@colors數組，我在這個例子中簡化了）但是你建議有2個列表，所以我會研究一下。謝謝 – nicedevman

你錯誤的是用0作爲起始索引。少於起始索引是1（僅僅因爲它在CSS本身就是這種方式）。 *但你建議有2個列表* - 不是2 - 只有一個（例如[這裏]（例如https://stackoverflow.com/questions/20954762））。 –

與字符串變量串聯，形成另一個變量

回答

相關問題