「減少」一個CSS顏色主題

我已經繼承了一大堆CSS的項目，並被分配了修改它的任務，因此可以很容易地更改調色板。「減少」一個CSS顏色主題

我已經立即想到使用CSS預處理器，嘗試減少和輕鬆地切換變量的顏色，所以我只需要定義基本顏色，並可以切換顏色主題。

問題是，每次切換顏色主題時，我必須用新顏色設置覆蓋colors.less，或者在大量文件中修改colors.less導入。

我想要的是帶有大量導入的單個文件（基本上每個組件或一組組件），並在該文件導入colors.red.less而不是顏色blue.less例如，在使用紅色調色板之後立即導入所有組件，以便編譯的主題是紅色而不是藍色。

我遇到的問題是組件文件沒有得到顏色定義的「全局變量」，所以我無法編譯導入這些文件的基本文件。

我讀過有可能使用「partials」（以_開頭的文件不會獨立編譯，而是導入並編譯），但我的編譯器似乎忽略了這個功能，而eclipse插件我用於編輯和驗證較少的文件也抱怨沒有在這些部分上定義的顏色變量。

我怎樣才能得到部分工作？有沒有更好的方法來完成這項任務？

來源

2015-02-09 NotGaeL

當使用更少的創建主要是一個一個的項目文件。該項目文件導入您的其他文件（由您調用的部分）。你只能將你的項目文件編譯成CSS。編譯哪些文件取決於您的構建過程。以bootstrap爲例，只有'bootstrap.less'文件將被編譯。 – 2015-02-09 21:44:18

是的，只有所有導入單獨編譯，然後放在一個輸出CSS上，而不是放在一起然後編譯。這就是爲什麼我的項目沒有編譯：我需要在導入的文件上聲明的變量對所有以下導入都可見。 – NotGaeL 2015-02-09 21:49:24

較少使用延遲加載和最後一次聲明獲勝，因此您可以在之後定義變量，請參閱：http://lesscss.org/features/#variables-feature-lazy-loading – 2015-02-09 22:05:34

Stil，它們將不會在導入的文件上定義，只是在主文件上，所以>編譯將在導入的文件上中斷。你明白我的意思嗎？

不是嗎？例如：

mixins.less：

.mixin() 
{ 
    color: @color; 
}

variables.less：

@color: orange;

project.less：

@import "mixins"; 
@import "variables"; 
p { 
.mixin(); 
}

現在運行lessc project.less輸出：

p { 
color:orange; 
}

現在我改變的project.less內容如下：

@import "mixins"; 
@import "variables"; 
p { 
.mixin(); 
} 
@color: red;

然後運行lessc project.less輸出：

p { 
color:red; 
}

來源

2015-02-10 08:23:12

棒極了！事實證明這是編譯器的eclipse插件設置中的一個問題。不知何故該插件編譯的不僅僅是主文件，所以它在編譯主文件之前停止了錯誤，這就是爲什麼我根本沒有編譯輸出（我仍然要弄清楚如何避免編輯器給我一個未定義的錯誤在每一行我使用這些變量的每個部分文件，但我可以忍受這一點）。非常感謝您的耐心;-) – NotGaeL 2015-02-10 16:55:51

「減少」一個CSS顏色主題

回答

相關問題