串聯的可變和一個字符串引用另一個變量中LESS

我有其表示顏色變量大的列表。例如，@Yellow-100是黃色的淺色陰影，而@Purple-900是深色的紫色陰影。串聯的可變和一個字符串引用另一個變量中LESS

我有一個@Page-Background變量，當前直接指向@Yellow-100，以及其他幾個指向其他各種黃色的變量。

@Page-Background: @Yellow-100;

...但我想設置一個基本顏色在我的應用程序使用，這樣我可以在不同顏色之間，而不必重命名所有這些變量的輕鬆切換。因此，我已經定義了以下變量：

@Base: Yellow;

我已經通過LESS's Variables documentation讀，但它沒有提到如何引用另一個變量與變量和一個字符串。 @@Base將引用@Yellow，但@@Base-100不引用@Yellow-100; @@{Base}-100或@{@Base}-100也不是。

如何通過將Yellow替換爲@Base將我的@Page-Background變量指向我的@Yellow-100變量？

來源

2015-05-19 James Donnelly

有跡象表明，這裏需要解決兩件事情：

當我們指定一個顏色名稱的變量，較少會在默認情況下將其轉換爲hex值在早期版本的編譯器，所以它最好使用引號內的值來減少意識到它是一個字符串而不是顏色。此問題has now been addressed因此，如果您使用Less編譯器的較新版本，則可能不需要此步驟。
我們必須通過連接到@Base變量的值的數量，形成衍生變量的名稱，然後評估它。

把兩者一起，下面的代碼應該工作：

@Yellow-100: #fff; 

@Page-Background: ~"@{Base}-100"; /* this will form the variable name */ 
@Base: "Yellow"; 

a{ 
    background: @@Page-Background; 
    /*using double @ references the variable whose name is contained in @Page-Background */ 
}

來源

2015-05-19 15:27:50 Harry

+1，但有什麼辦法，我可以做到這一點而不需要'@@ temp'變量？否則，我將不得不爲每種顏色的陰影定義一個單獨的「@@ temp」變量，而且這聽起來有點向後。 –

@JamesDonnelly：我不認爲這是可能的，因爲我們首先要形成可變的字符串名字，然後引用它。但我會試着讓你知道，如果我找到一種方法:) – Harry

好吧，我設法找到一種方法。現在更新答案:) – Harry

串聯的可變和一個字符串引用另一個變量中LESS

回答

相關問題