值得參考的 10 個 LESS CSS 實例 
2
收藏(185)
LESS, Sass 和其他 CSS 預處理器是一種超棒的方法用來擴展 CSS 功能，使之更適合程序員。你可以使用變量、函數、混合、繼承等多種編程常用方法來編寫 CSS，以更少的代碼完成更多的樣式。
學習這些工具最好的方法是通過各種實例快速入門，今天我們向你介紹 10 個非常有用的使用 Less CSS 的實例。
使用 LESS
如果你還沒接觸過 LESS CSS ，可以閱讀下面兩篇文章：
我該如何使用這些實例
我建議是你直接可以把本文中的代碼復制粘貼到你的 .less 文件。
可以讓你這些文件獨立於你的項目，通過 “@import “starter.less” 來引入。
你還可以使用類似 Less.app, CodeKit 這樣的工具來將 LESS 編譯成 CSS 。
如果我使用的是 Sass
如果你更喜歡的是 Sass 而不是 LESS，沒問題，這兩個工具都很棒，它們的語法有一點不同，請看上圖。兩者更詳細的比較請看這里。
好了，不廢話了，我們開始本文的主題！
圓角
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 處理效果。