值得參考的10個LESSCSS例項

LESS, Sass 和其他 CSS 前處理器是一種超棒的方法用來擴充套件 CSS 功能，使之更適合程式設計師。你可以使用變數、函式、混合、繼承等多種程式設計常用方法來編寫 CSS，以更少的程式碼完成更多的樣式。

學習這些工具最好的方法是通過各種例項快速入門，今天我們向你介紹 10 個非常有用的使用 Less CSS 的例項。

使用 LESS

如果你還沒接觸過 LESS CSS ，可以閱讀下面兩篇文章：

• Using Less.js to Simplify Your CSS3
• How to Build a Responsive Frankenstein Framework With LESS

我該如何使用這些例項

我建議是你直接可以把本文中的程式碼複製貼上到你的 .less 檔案。

可以讓你這些檔案獨立於你的專案，通過 “@import “starter.less” 來引入。

你還可以使用類似 Less.app, CodeKit 這樣的工具來將 LESS 編譯成 CSS 。

如果我使用的是 Sass

如果你更喜歡的是 Sass 而不是 LESS，沒問題，這兩個工具都很棒，它們的語法有一點不同，請看上圖。 

好了，不廢話了，我們開始本文的主題！

圓角

CSS3 一個非常基本的新屬性可以快速的生產圓角效果，如上圖所示。要使用 CSS3 的圓角效果我們必須針對不同的瀏覽器定義各自的字首，而如果使用了 LESS 就可以不用那麼麻煩。

1. 簡單的圓角半徑

我的第一個 LESS 程式碼是我最簡單的 LESS 程式碼之一，我需要設定圓角的半徑，而且我希望使用一個變數來調整這個半徑大小。

下面程式碼使用 mixin 技術，通過定義 .border-radius 並接收一個 radius 引數，該引數預設值是 5px，你可以在多個地方重複使用該 mixin 方法：

將這個 less 編譯成 css 後的結果是：

2. 四角的半徑定製

如果你希望使用者可自由定製四個角的半徑，那麼我們需要對上面程式碼做下改進。

使用4個變數分別代表四個邊角的半徑大小：

編譯後的 CSS

3. 方塊陰影 Box Shadow

另外一個 CSS3 經常用到的屬性是 box-shadow，該屬性也有不同瀏覽器的字首要求，而使用 LESS 的話可以這樣：

生成的 CSS：

4. 元素過渡效果 Transition

CSS3 的過渡使用起來更加麻煩，你必須最大化的支援各種瀏覽器，因此你需要定義 5 個字首：

轉換後的 CSS 程式碼：

5. 轉換/旋轉 Transform

你可以使用 CSS3 來對元素進行角度旋轉、縮放和傾斜等效果：

生成的 CSS：

顏色漸變 Gradients

漸變是 CSS3 最複雜的屬性之一，有上百萬中不同的設定組合，但我們常用的無非幾種。

6. 線性漸變 Linear Gradient

我們還是從最簡單的開始，實現兩個不同顏色之間的漸變，你可以定義開始顏色和最終顏色，這裡我們使用最新的漸變語法，瀏覽器的支援情況請看這裡。

生成的 CSS

7. 快速漸變 Quick Gradient

建立漸變最討厭的事情之一就是找出你的顏色。有時你只是想快速在現有顏色上做一些漸變效果。

這裡我們使用從透明開始到全黑的漸變效果，你需要設定的就是最初顏色已經透明度 alpha 值：

生成的 CSS：

8. 映象效果 Webkit Reflection

CSS3 中的映象效果在瀏覽器都是普遍支援的。你需要做的就是設定長度和不透明度這兩個引數，很簡單：

生成的 CSS：

顏色計算 Color Math

LESS 和 Sass 最獨特的功能就是顏色計算函式，你可以輕鬆使用 LESS 來建立各種調色盤，下面是兩個簡單的例子。

9. 互補色方案 Complementary Color Scheme

這裡我們使用一個基本色，然後通過彩色旋轉以及加亮和變暗方法擴充套件到5個不同色板。為了生成互補色，我們使用 spin 將顏色旋轉 180 度：

生成的 CSS：

10. 顏色微調 Subtle Color Scheme

互補色很有用，但在網頁設計中另外一個更有用的就是顏色微調：

生成的 CSS：

結論

到這裡我們這篇文章就結束了，主要的目的是講述使用 LESS 處理一些常用的 CSS3 處理效果。