如何在LessCSS中動態設置CSS類名稱？

Question

我需要爲CSS類添加一個動態名稱來創建更具體的派生選擇器。

這裏是我更少的代碼：

@scope: name; //line1 
.@scope .ui-widget{ color: #fff} //line2 

但我在2號線獲取解析器錯誤。

有沒有什麼辦法可以在LessCSS中動態設置CSS類名？

Answer 1

支持加入less.js和帶點版本1.3

你必須使用括號和轉義字符串..例如

(~".@{scope} .another") { 
    color: #fff; 
} 

編輯

這種格式已經過時了。 1.3.1少（目前只有軀幹less.js的版本）支持簡單的語法

.@{scope} .another-class { 
    color: white; 
} 

Answer 2

嘗試下面的代碼，以獲得預期的輸出

@scope: name;//line1 
(~".@{scope} .ui-widget") { color: #ffbbff} //line2