值得參考的 10 個 LESS CSS 實例

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 方法：

/ Mixin /
.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

/ Implementation /
somediv {

.border-radius(20px);

}</pre> 
  
 
  
將這個 less 編譯成 css 后的結果是：
 
  
/ Compiled CSS /

somediv {
-webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}</pre> 
  
 
  
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);

}</pre> 
  
編譯后的 CSS
 
  
/ Compiled CSS /

somediv {
-webkit-border-radius: 20px 20px 0px 0px;
  -moz-border-radius: 20px 20px 0px 0px;
  border-radius: 20px 20px 0px 0px;
}</pre> 
  
 
  
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);

}</pre> 
  
生成的 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);
}</pre> 
  
 
   
 
  </div> 
  
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;

}</pre> 
  
 
  
轉換后的 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;
}</pre> 
  
 
  
 
  
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);

}</pre> 
  
生成的 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);
}</pre> 
  
 
  
 
   
 
  </div> 
  
顏色漸變 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);

}</pre> 
  
生成的 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);
}</pre> 
  
 
  
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);

}</pre> 
  
生成的 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));
}</pre> 
  
 
  
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);

}</pre> 
  
生成的 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)));
}</pre> 
  
 
  
顏色計算 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;}</pre> 
  
生成的 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;}</pre> 
  
生成的 CSS：
 
  
/* Compiled CSS */
.one   {color: #663333;}
.two   {color: #884a44;}
.three {color: #aa6355;}
.four  {color: #442225;}
.five  {color: #442225;}
 
  
 
  
結論
 
  
到這里我們這篇文章就結束了，主要的目的是講述使用 LESS 處理一些常用的 CSS3 處理效果。
 
  英文原文， OSCHINA原創翻譯

                    

                        
 本文由用戶 fmms  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 
本文地址：http://www.baiduhome.net/news/view/c68e5d                        
                        
 CSS
                    
                
                

                

                    
相關資訊
                    

                        

                            
                             值得參考的 10 個 LESS CSS 實例
                        
                        

                            
                             CSS 框架，Less CSS 1.2.2 發布
                        
                        

                            
                             50個值得收藏的實用CSS代碼片段
                        
                        

                            
                             15個值得收藏的新CSS工具
                        
                        

                            
                             10個最佳的 Swift 教程實例
                        
                    
                
                

                    
相關經驗
                    

 Less Css for .NET
 less編寫css代碼
 CSS預處理器 Less CSS
 CSS 網格系統：Less Framework
 CSS3 LESS框架 Perkins
                    
                
                

                    
相關文檔
                    

 CSS 參考手冊
 css屬性參考手冊
 35個Jquery應用實例
 python幾個實例
 DIV+CSS網頁設計實例教程