5分鍾快速入門 - Less

下面給大家講解下Less，純手工，入門級別，相信沒學過的人閱讀完后就懂了，以下是我要講的四點：

• 簡單介紹

　　　　Less CSS 是一個使用廣泛的 CSS 預處理器。

　　　　對 CSS 進行擴展，減少很多 CSS 的代碼量。

　　　　LESS 將 CSS 賦予了動態語言的特性，如 變量， 繼承， 運算， 函數.

　　　　LESS 既可以在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js).

• 快速入門　　　

　　　　在服務器端最容易的安裝方式就是通過 npm （node.js 的包管理器），方法如下：

$ npm install -g less

　　　　安裝 Less 后，就可以在命令行上調用 Less 編譯器了，如下：

$ lessc gloal.less

　　　　你可以將輸出重定向到一個文件：

$ lessc gloal.less > gloal.css

• 常用語法　

1.變量

@color: #4d926f; 
#header { color: @color; }

#header { color: #4d926f; }

@color: #253636; 
@color: #ff3636;     //覆蓋第一次的定義
#header {color: @color;}        //多次反復解析

#header {color: #ff3636;}

 

2.Mixins——混入, 類似函數或宏

.borderRadius(@radius:3px){ 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 

#header { .borderRadius(10px); } 

.btn { .borderRadius} 

編譯后：

#header { 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
.btn {
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
}  

Mixins注意事項：

a.可以不使用參數 .wrap(){…} .pre{ .wrap }

b.內置變量@arguments代表所有參數(運行時)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; } 注意，在參數沒有默認值的前提下使用@arguments調用時必須賦值，否則會導致整個頁面內的less語法出錯而失效。

c. Mixins必須使用ID或者類，即#xx或.xx，否則無效。

 

3.嵌套　　　

#header { 
    &.fl{ float: left; }
     .mln { margin-left: 0; } 
   } 


  #header.fl{float: left;} 
  #header .mln {margin-left: 0;}

 

4.運算&函數

@init: #111111; 
 @transition: @init*2; 
 .switchColor { 
     color: @transition;     
 }
.switchColor { 
   color: #222222; 
 }
.lightColor{
   lighten(@color, 10%);
}

運算主要是針對任何數字、顏色、變量的操作，支持加、減、乘、除、()或者更復雜的綜合運算；而Functions主要是針對顏色，同時提供了部分數學函數，具體的API可參閱文檔。

 

5.繼承　　　　

.animal {  background-color: black;  color: white;}
.bear {  &:extend(.animal);  background-color: brown;}

當前還有其他繼承的寫法，我這只是寫了其中的一種，詳細可在官網上查看文檔。

　　　

6.作用域

@var: red; 
#page { 
    @var: white;
    #header { color: @var; // white } 
}
#footer { 
    color: @var; // red 
}

Less中的變量、Mixins等的作用域都只是當前文件！

7.注釋

　　單行注釋方式： //單行注釋

　　單行、多行注釋： /* 注釋 多行注釋 */

• 資源分享

　　　　官網：lesscss.org

　　　　中文社區：www.lesscss.net 

　　　　在線LESS編譯：http://tool.oschina.net/less

　　　　...