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

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

圓角

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

1. 簡單的圓角半徑

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

下面代碼使用 mixin 技術，通過定義 .border-radius 并接收一個 radius 參數，該參數默認值是 5px，你可以在多個地方重復使用該 mixin 方法：

/* Mixin */
.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}
 
/* Implementation */
#somediv {
	.border-radius(20px);
}

 

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

/* Compiled CSS */
#somediv {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

 

2. 四角的半徑定制

如果你希望用戶可自由定制四個角的半徑，那么我們需要對上面代碼做下改進。

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

/* Mixin */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
	-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
	-moz-border-radius: @topleft @topright @bottomright @bottomleft;
	border-radius: @topleft @topright @bottomright @bottomleft;
}
 
/* Implementation */
#somediv {
	.border-radius-custom(20px, 20px, 0px, 0px);
}

編譯后的 CSS

/* Compiled CSS */
#somediv {
  -webkit-border-radius: 20px 20px 0px 0px;
  -moz-border-radius: 20px 20px 0px 0px;
  border-radius: 20px 20px 0px 0px;
}

 

3. 方塊陰影 Box Shadow

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

/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
	-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
	-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
	box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
 
/* Implementation */
#somediv {
	.box-shadow(5px, 5px, 6px, 0.3);
}

生成的 CSS：

/* Compiled CSS */
#somediv {
  -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}

4. 元素過渡效果 Transition

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

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
	-webkit-transition: @prop @time @ease;
	-moz-transition: @prop @time @ease;
	-o-transition: @prop @time @ease;
	-ms-transition: @prop @time @ease;
	transition: @prop @time @ease;
}
 
/* Implementation */
#somediv {
	.transition(all, 0.5s, ease-in);
} 
 
#somediv:hover {
	opacity: 0;
}

 

轉換后的 CSS 代碼：

/* Compiled CSS*/
#somediv {
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
 
#somediv:hover {
  opacity: 0;
}

 

5. 轉換/旋轉 Transform

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

/* Mixin */
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
	-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
 
/* Implementation */
#someDiv {
	.transform(5deg, 0.5, 1deg, 0px);
}

生成的 CSS：

/* Compiled CSS*/
#someDiv {
  -webkit-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -moz-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -o-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -ms-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
}

 

顏色漸變 Gradients

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

6. 線性漸變 Linear Gradient

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

/* Mixin */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
	background-color: @start;
	background-image: -webkit-linear-gradient(@origin, @start, @stop);
	background-image: -moz-linear-gradient(@origin, @start, @stop);
	background-image: -o-linear-gradient(@origin, @start, @stop);
	background-image: -ms-linear-gradient(@origin, @start, @stop);
	background-image: linear-gradient(@origin, @start, @stop);
}
 
/* Implementation */
#someDiv {
	.gradient(left, #663333, #333333);
}

生成的 CSS

/* Compiled CSS */
#someDiv {
  background-color: #663333;
  background-image: -webkit-linear-gradient(left, #663333, #333333);
  background-image: -moz-linear-gradient(left, #663333, #333333);
  background-image: -o-linear-gradient(left, #663333, #333333);
  background-image: -ms-linear-gradient(left, #663333, #333333);
  background-image: linear-gradient(left, #663333, #333333);
}

 

7. 快速漸變 Quick Gradient

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

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

/* Mixin */
.quick-gradient (@origin: left, @alpha: 0.2) {
	background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
 
/* Implementation */
#somediv {
	background-color: BADA55;
	.quick-gradient(top, 0.2);
}

生成的 CSS：

/* Compiled CSS */
#somediv {
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

 

8. 鏡像效果 Webkit Reflection

CSS3 中的鏡像效果在瀏覽器都是普遍支持的。你需要做的就是設置長度和不透明度這兩個參數，很簡單：

/* Mixin */
.reflect (@length: 50%, @opacity: 0.2){
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}
 
/* Implementation */
#somediv {
	.reflect(20%, 0.2);
}

生成的 CSS：

/* Compiled CSS */
 
#somediv {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.2)));
}

 

顏色計算 Color Math

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

9. 互補色方案 Complementary Color Scheme

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

/* Mixin */
@base: #663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);
 
/* Implementation */
.one   {color: @base;}
.two   {color: @complement1;}
.three {color: @complement2;}
.four  {color: @lighten1;}
.five  {color: @lighten2;}

生成的 CSS：

/* Compiled CSS */
.one   {color: #663333;}
.two   {color: #336666;}
.three {color: #2b5555;}
.four  {color: #994d4d;}
.five  {color: #bb7777;}

 

10. 顏色微調 Subtle Color Scheme

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

/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);
 
/* Implementation */
.one   {color: @base;}
.two   {color: @lighter1;}
.three {color: @lighter2;}
.four  {color: @darker1;}
.five  {color: @darker2;}

生成的 CSS：

/* Compiled CSS */
.one   {color: #663333;}
.two   {color: #884a44;}
.three {color: #aa6355;}
.four  {color: #442225;}
.five  {color: #442225;}

 

結論

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