LESS變量級聯和插值

Question

我正試圖在按鈕上覆蓋Bootstrap的懸停效果。我想節省一些空間，並通過簡單地通過混入一個類的名稱來實現，並讓該類的背景變量自動從這個類推導出來。所以我的混入是：

.btn-hover(@name){ 
    .@{name}:hover{ 
     background: lighten(@~"@{name}-bg", 10%); 
    } 
} 

.btn-hover(btn-primary); 

但我似乎無法通過連接到-bg到btn-primary訪問變量@btn-primary-bg，因爲@~"@{btn-name}-bg"導致編譯錯誤。我試圖做甚至可能嗎？如果是的話，這將是非常光滑的。

編輯--------------------------------------------- --------------------

只是偶然發現了這個question和它肯定有關，但我覺得我的問題實際上只是歸結爲：

在LESS中，可以在字符串連接後通過插值訪問變量嗎？

@btn-success-bg: #00ff00; 
@name: btn-success; 
@background: @~"@{name}-bg"; // How do I access @btn-success-bg? 

Answer 1

你可以做：

@btn-primary-bg: red; 

    .btn-hover(@name){ 
     .@{name}:hover{ 
      @buttonname: ~"@{name}-bg"; 
      background: lighten(@@buttonname, 10%); 
     } 
    } 

    .btn-hover(btn-primary); 

另見：http://lesscss.org/features/#variables-feature-variable-names