配色方案，使用LESS color函數(shù)創(chuàng)建配色方案(3)

飽和度

或者，我們可以調(diào)整顏色飽和度來(lái)代替明暗度。飽和度定義了一種顏色的深度。飽和度越大，顏色越亮麗，最低飽和度則會(huì)使顏色趨于灰色。

拿上面的例子來(lái)說(shuō)，我們可以用saturate() 和 desaturate()函數(shù)來(lái)替換明暗度的函數(shù)，此外，還可以定義未激活狀態(tài)的顏色。

進(jìn)一步調(diào)整顏色的不飽和度，直到認(rèn)為它在你的設(shè)計(jì)背景中合適為止。

現(xiàn)在當(dāng)我們自定義按鈕樣式的時(shí)候，我們的變量色都是與基準(zhǔn)色緊密聯(lián)系的；當(dāng)基準(zhǔn)色改變的時(shí)候，它們都會(huì)進(jìn)行相應(yīng)的變化。

智能色彩輸出

LESS讓我們的樣式變得更智能。舉例來(lái)說(shuō)，我們能讓我們的樣式自己“思考”并決定什么顏色在什么條件下適用。假設(shè)我們正在創(chuàng)建一個(gè)網(wǎng)站模板，這是按鈕的基本樣式，你打算用不同的顏色和風(fēng)格來(lái)擴(kuò)展它。但是我們?cè)鯓涌刂祁伾�的輸出呢？我們�?dāng)然不希望深色的文字在深色的背景上，反之亦然。我們需要確保文本保留對(duì)比，以便于閱讀，這樣，contrast()函數(shù)就派上用場(chǎng)了。

在上面的例子中，我們通過(guò)contrast()函數(shù)來(lái)設(shè)置顏色。這樣確保文本顏色與背景顏色有足夠的反差。在這種情況下，由于背景顏色是#000,文本顏色應(yīng)該返回#fff。如果你設(shè)置背景色為淺色，比如說(shuō)白色，煙白，或者天藍(lán)色，文本顏色應(yīng)該返回#000。

你也可以自定義顏色的明暗。在下面的例子中，顏色值將返回#999或#777，而不是#fff，或者#000。

通常情況下，如果顏色是透明的，尤其是背景顏色，我也不想輸出顏色聲明。對(duì)此，我們可以在LESS 混合閉包內(nèi)封裝background聲明。

你也可以為border屬性和color屬性作同樣的聲明，并通過(guò)刪除不必要的規(guī)則在你的樣式表里只保留幾行代碼。你同樣可以在聲明border與color屬性時(shí)做同樣的事，并只保留一些必要的代碼。

結(jié)束語(yǔ)

我希望我介紹的某些函數(shù)能幫助你在設(shè)計(jì)中提升配色能力。你可以在LESS官網(wǎng)上上找到完整的函數(shù)清單，并試驗(yàn)它。我非常同意Kezz Bracey的說(shuō)法。配色的唯一方法就是反復(fù)的試驗(yàn)。

“直到我通過(guò)反復(fù)試驗(yàn)來(lái)開始創(chuàng)建可靠的配色方案，我所看過(guò)的所有色彩理論才開始變得有意義”