LESS CSS非常實用的10個實例應(yīng)用

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

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

圓角

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

1. 簡單的圓角半徑

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

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

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

 

將這個 less 編譯成 css 后的結(jié)果是：

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

 

2. 四角的半徑定制

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

使用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 經(jīng)常用到的屬性是 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;
}

 

轉(zhuǎn)換后的 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. 轉(zhuǎn)換/旋轉(zhuǎn) Transform

你可以使用 CSS3 來對元素進(jìn)行角度旋轉(zhuǎn)、縮放和傾斜等效果：

/* 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 最復(fù)雜的屬性之一，有上百萬中不同的設(shè)置組合，但我們常用的無非幾種。

6. 線性漸變 Linear Gradient

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

/* 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

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

這里我們使用從透明開始到全黑的漸變效果，你需要設(shè)置的就是最初顏色已經(jīng)透明度 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 中的鏡像效果在瀏覽器都是普遍支持的。你需要做的就是設(shè)置長度和不透明度這兩個參數(shù)，很簡單：

/* 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 最獨(dú)特的功能就是顏色計算函數(shù)，你可以輕松使用 LESS 來創(chuàng)建各種調(diào)色板，下面是兩個簡單的例子。

9. 互補(bǔ)色方案 Complementary Color Scheme

這里我們使用一個基本色，然后通過彩色旋轉(zhuǎn)以及加亮和變暗方法擴(kuò)展到5個不同色板。為了生成互補(bǔ)色，我們使用 spin 將顏色旋轉(zhuǎn) 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. 顏色微調(diào) Subtle Color Scheme

互補(bǔ)色很有用，但在網(wǎng)頁設(shè)計中另外一個更有用的就是顏色微調(diào)：

/* 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;}

 

結(jié)論

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