簡單的方法來實現CssLess插值

我正在做一些插值的變量與較少的CSS（我認爲這是正確的術語），但我忍不住想我有更多的步驟比我需要。簡單的方法來實現CssLess插值

下面是我在做什麼：

@blue50:#e3f2fd; // concrete colorways 
@green50:#e8f5e9; 
@red50:#ffebee;

...我設定的當前主題是這樣的：

@primaryColor:'blue';

...並有一些輔助的東西，幫助我找回正確的顏色：

@primary50:@@_primary50; // It feels like these 2 lines should be 1! 
@_primary50:'@{appPrimaryColor}50';

這使我指@primary50，這反過來又返回的C直立的藍色（@ blue50）基於我設定的主題。

正如你所看到的，有2個幫手步驟，我認爲這些步驟可以簡化。但是，我一直無法制定出正確的語法來完成這項工作。這似乎是一個微不足道的措施，但有超過一百種顏色和幾個主題，所以這是一個長期的方法。

第一步，將簡單的步驟數。其次，如果可能的話，我想製作一個可以照顧所有色調的顏色的循環。在我的例子我用的是50的色調，但完整的範圍包括50,100,200,300,400,500,600,700,800,900，讓@ blue50，@ blue100，blue200等

/*示例輸出*/

色板爲 '藍色'

@blue50:#e3f2fd; 
@blue100:#bbdefb; 
@blue200:#90caf9; 
@blue300:#64b5f6; 
@blue400:#42a5f5; 
@blue500:#2196f3; 
@blue600:#1e88e5; 
@blue700:#1976d2; 
@blue800:#1565c0; 
@blue900:#0d47a1;

設置主題：

@appPrimaryColor:'blue';

使用這些輔助變量，每種色調

種

@primary50:@@_primary50; 
@_primary50:'@{appPrimaryColor}50';

並獲得色彩使用這些變量

@primary50:@@_primary50; 
@primary100:@@_primary100; 
@primary200:@@_primary200; 
@primary300:@@_primary300; 
@primary400:@@_primary400; 
@primary500:@@_primary500; 
@primary600:@@_primary600; 
@primary700:@@_primary700; 
@primary800:@@_primary800; 
@primary900:@@_primary900;

並以此樣式表

.mystyle1 { 
    color:@primary50; 
} 
.mystyle2 { 
    color:@primary100; 
}

來源

2016-02-22 John Ohara

問題的第一部分很容易處理，但這一點是不可能的，因爲你不能動態地形成變量名稱 - *在我的例子中，我使用50色調，但全範圍包括50,100,200,300,400,500,600,700,800,900，所以。 .. *。但取決於輸出CSS應該如何，也許可以使用循環。如果你顯示你期望的CSS輸出，我可以建議一種方法。 – Harry

看起來像一個「XY問題」。你能否提供你需要這些變量的更多細節？ –

@哈里 - 提供一個很好的例子並不容易，因爲它只是一個基於臨時變量的轉換，但我已經添加了一個如何使用它的例子。 –

正如你可以看到有2個幫手步驟，我認爲可以簡化。

要回答這個特定的問題，一個班輪當量爲：

@primary50: @@_primary50; 
@_primary50: '@{appPrimaryColor}50';

（假設值是彩色）可以寫成：

@primary50: color("@{@{appPrimaryColor}50}");

但由於有沒有太多的理由不使用這樣的代碼，以及計算整個片段本身更像是一個XY問題，這將是值得考慮替代impl ementation在用例中接近（某些提示和例子在問題評論中提到，儘管它只是太多的影響因素和太多的將所有內容放入單一答案的特定模式）。

來源

2016-02-22 16:05:06

簡單的方法來實現CssLess插值

回答

相關問題