如何在LESS中的變量中使用變量名？

Question

我有這樣的代碼片段：

// Color settings 
.setCat(@x) { 
    .cat@{x} { 
     .menu-link { 
      &.selected, &:hover { background: ~@{"catColor@{x}"}; } 
      &:hover:after { border-top-color: ~@{"catColor@{x}"}; } 
      &:only-child:after { border-top-color: transparent; } 
     } 
     .menu-link-submenu { background: ~@{"catColor@{x}"}; } 
    } 
} 

.setCat(1); 

我希望你能看到什麼，我試圖做的。我想要@CatColor1輸出，然後將LESS編譯成存儲在該變量中的我的十六進制顏色。

這可能嗎？有沒有更好的辦法？

Answer 1

您需要將兩個調用嵌套到字符串中。我已經通過做出的處理都去一個新的變量useColor（你不必做，我只是覺得它看起來更清潔）：

.setCat(@x) { 
    .cat@{x} { 
     @useColor: ~"@{catColor@{x}}"; 
     .menu-link { 
      &.selected, &:hover { background: @useColor; } 
      &:hover:after { border-top-color: @useColor; } 
      &:only-child:after { border-top-color: transparent; } 
     } 
     .menu-link-submenu { background: @useColor; } 
    } 
} 

所以假設這LESS：

@catColor1: #fff; 
@catColor2: #aaa; 

.setCat(1); 
.setCat(2); 

生成以下CSS：

.cat1 .menu-link.selected, 
.cat1 .menu-link:hover { 
    background: #ffffff; 
} 
.cat1 .menu-link:hover:after { 
    border-top-color: #ffffff; 
} 
.cat1 .menu-link:only-child:after { 
    border-top-color: transparent; 
} 
.cat1 .menu-link-submenu { 
    background: #ffffff; 
} 
.cat2 .menu-link.selected, 
.cat2 .menu-link:hover { 
    background: #aaaaaa; 
} 
.cat2 .menu-link:hover:after { 
    border-top-color: #aaaaaa; 
} 
.cat2 .menu-link:only-child:after { 
    border-top-color: transparent; 
} 
.cat2 .menu-link-submenu { 
    background: #aaaaaa; 
}