摘要：例如解析現在流行的預編譯語言和的優點簡單，易于維護，管理更加容易高效的進行開發使用實現配色將變得非常容易。變量避免編譯，有時候需要輸出一些不正確的語法或者使用一些不認識的專有語法，在前面加入。對于剛接觸的預編譯的前端，我推薦用。

? less官網：Less is More , Than CSS -少即是多，比CSS

? 官網gitHub：https://github.com/less/less.js

Less是一門css預處理語言，或是一種動態樣式語言。擴展了css語言，增加了變量、繼承、嵌套、運算、函數等特性，使css更易維護和擴展。（類似jquery）

Less既可以在瀏覽器端上運行（支持IE7+、chrome、ff等主流瀏覽器，不支持iPad 待測試），也可以在Node服務器端運行。

例如：

@base: #f938ab;
@width:200px;
.box-shadow(@style, @c) when (iscolor(@c)) {
    width:@width;
    height:@width;
    margin-top:20px;
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  .div1 { .box-shadow(0 0 5px, 30%) }
  .div2{
      .box-shadow(5px 5px 5px 5px,@base);
  }
}

解析：

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box .div1 {
  width: 200px;
  height: 200px;
  background-color: red;
  color: #fff;
  margin-top: 20px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.box .div2 {
  width: 200px;
  height: 200px;
  background-color: red;
  color: #fff;
  margin-top: 20px;
  -webkit-box-shadow: 5px 5px 5px 5px #f938ab;
  box-shadow: 5px 5px 5px 5px #f938ab;
}

現在流行的css預編譯語言：Less和Sass

簡單，易于維護，CSS管理更加容易

高效的進行開發

使用Less實現配色將變得非常容易。

與CSS能夠很好地融合使用。

同時兼容CSS3

運用GUI工具運用工具koala或者SimpLess是來自動解析成.css文件（已給大家講過，這里不在重復）

引用less.js進行解析，在頁面引入less.js對.less文件進行解析。

less官網在線解析：http://less2css.org

運用node來解析成css

利用gulp等自動化工具進行解析研究中

Source Map：編譯過程中生成 css 對應的 map 文件。調試時使用，有了source map，瀏覽器里直接顯示less，非常方便

Line Comments：保留注釋，勾選后編譯中在注釋上一行添加一條空行。

Autoprefix：自動給 CSS3 元素加上瀏覽器前綴。

參考：知乎

第一步，引入styls.less，注意 rel=“stylesheet/less”

1、內聯樣式：

? 2、外聯樣式

第二步，參數配置（可省略）具體意思待研究

第三步，引入less.js，在此前加入.less文件。

第二步和第三步一起

注意：

如果加載多個.less樣式表文件，每個多帶帶編譯，一個文件中定義的任何變量都無法再其他文件中訪問。不會存在變量重復問題。

在服務器環境下使用，本地直接打開可能會報錯！

Less兼容IE7+，如需兼容則需要先引入es5-shim.js即可。

其中還有一些高級配置，也可通過瀏覽器直接調試，具體見參考文檔。

不建議使用，增加服務器壓力，不利于調試。

先按照node.js

下載less的管理工具包

$ sudo npm install -g less

執行方法解析成css文件

$ lesssc styles.less styles.css

解析成min.css文件，安裝clean-css

$ npm install clean-css

$ lessc --clean-css styles.less styles.min.css

less命令行用法

node上安裝即時編譯的插件

$ (sudo) npm install -g less-watch-compiler
$ less-watch-compiler path_input path_out
$ less-watch-compiler path_input path_out fileName.less

添加廠商前綴

$(sudo) npm install -g less-plugin-autoprefix
$ less inputFile.less outFile.less —autoprefix=“browsers”
$ lessc test.less test.css --autoprefix="ie >= 8, last 3 versions, > 2%"

SublimeText：Less-sublime、Sublime-Less-to-CSS、Less-build-sublime、SublimeOnSaveBuild

Dreamweaver：DMXzone Less CSS Compiler

Notepad++ 6.x：less.js語法高亮

Brackets：內置支持 語法高亮，還有一些擴展BracketLESS

/** 可解析 **/

//不可解析

變量@來定義，允許多帶帶定義一系列通用的樣式，然后在需要的時候進行調用。

//less                          
@cGray:#ccc; 
@cRed:red;
@width:80px;
@height:120px;
.div1{
  color:@cGray;
  border:1px solid @cGray;
  width:@width;
  height:@height;
}
.div2{
  color:@cRed;
  background:@cGray;
  width:@height;
  height:@width;
}

 /*生成的css*/
.div1 {
  color: #cccccc;
  border: 1px solid #cccccc;
  width: 80px;
  height: 120px;
}
.div2 {
  color: #ff0000;
  background: #cccccc;
  width: 120px;
  height: 80px;
}

在一個選擇其中嵌套另一個選擇器來實現繼承，減少代碼量，代碼更清晰。代碼優化考慮，最多嵌套三層。

有&時解析的是同一個元素或此元素的偽類，沒有&解析是后代元素

// LESS
#demo2 {
  h2 {
    font-size: 18px;
    font-weight: bold;
  }
  p { 
    font-size: 12px;
    color:#90bd39;
    a { text-decoration: none;
      &:hover { text-decoration: underline; }
    }
  }
}

/* 生成的 CSS */
#demo2 h2 {
  font-size: 18px;
  font-weight: bold;
}
#demo2 p {
  font-size: 12px;
  color:#90bd39;
}
#demo2 p a {
  text-decoration: none;
}
#demo2 p a:hover {
  text-decoration: underline;
}

運算提供了加減乘除操作，可以對任何數字、顏色、變量進行運算，可以實現屬性值之間的復雜關系。和Javascript代碼一樣。

//less
@basewidth: 100px;
@baseColor: #111;
@blue: #09c;
.div1 {
  color: @baseColor * 3;
  height: @basewidth;
  width: @basewidth * 2;
}
.div2 { 
  color: @baseColor + #003300;
  background-color: desaturate(@blue, 10%);
}

/* 生成的 CSS */
.div1 {
  color: #333333;
  height: 100px;
  width: 200px;
}
.div2 { 
  color: #114411;
  background-color: #0a94c2;
}

運算有順序，和平時的四則運算一樣

@var: 20px;
.div3 {
  width: @var + 5 * 2;
  height: (@var + 5 ) * 2;
}

.div3 {
  width: 30px;
  height: 50px;
}

色輪，spin(param1,param2)函數

互補色，互補的顏色正好在色輪相反的位置

@colorBase:#3bafdA;
@colorComplement:spin(@colorBase,180);//得到#dc6939

三元色。我們可以進一步探討顏色模型并且創建一個三元色結構。“三元”，顧名思義，是由三種顏色組成。因此，我們將色輪分成三部分，并且用函數spin()來設置旋轉的度數：

@triadicSecondary:spin(@colorBase,-(360/3));//第二種顏色#b1d926
@triadicTertiary:spin(@colorBase, 360/3);//第三種顏色#db43b2

混合色，mix(param1,param2)，對兩個顏色進行混合

#div1{color:mix(red,yello)}//#ff800

明暗度，lighten(param1,param2)淺一點，darken(param1,param2)深一點

@ahover:lighten(@colorBase,10%);
@afocus:darken(@colorBase,10%);

飽和度，saturate(param1,param2)和desaturate(param1,param2)。飽和度定義了一種顏色的深度。飽和度越大，顏色越亮麗，最低飽和度則會使顏色趨于灰色。

@btnHover:saturate(@colorBase,10%);
@btnFocus:desaturate(@colorBase,10%);
@btnDisable:lightness(desaturate(@colorBase,100%),30%;

智能色彩輸出。LESS讓我們的樣式變得更智能。舉例來說，我們能讓我們的樣式自己“思考”并決定什么顏色在什么條件下適用。假設我們正在創建一個網站模板，這是按鈕的
基本樣式，你打算用不同的顏色和風格來擴展它。但是我們怎樣控制顏色的輸出呢？我們當然不希望深色的文字在深色的背景上，反之亦然。我們需要確保文本保留對比，以便于閱讀，這樣，contrast()函數就派上用場了。

@bColor:#000;
div{
  background-color:@bColor;
  color:contrast(@bColor);//#ff
}

混合可以將一個定義好的class A輕松引入到另個class B里面，從而簡單實現class B繼承class A中的所有屬性。還可以帶參數調用，和函數一樣。

有默認值,也可以不加默認值，或者是不加參數、多個參數都可行。

需要帶括號，如果是沒有變量的時候可不帶括號。

例如：

//less
.rounded-corners (@radius: 5px) {
  width:100px;
  height:30px;
  margin-bottom:10px;
  background-color: #ccc;
  color:#333;
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.div1{
  .rounded-corners();//.rounded-corners;
}
.div2{
  .rounded-corners(10px);
} 

/* 生成的 CSS */
.div1 {
  width: 100px;
  height: 30px;
  margin-bottom: 10px;
  background-color: #ccc;
  color: #333;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.div2 {
  width: 100px;
  height: 30px;
  margin-bottom: 10px;
  background-color: #ccc;
  color: #333;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

匹配模式，即使同一個函數用不同的參數時調用不同的方法。例如寫一個三角：

.triangleBase{
  width:0;
  height:0;
  overflow:hidden;
}
.triangle(top,@w:5px,@c:#ccc){
  .triangleBase;
  border-width:@w;
  border-color:@c transparent transparent transparent;
  border-style:solid dashed dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  .triangleBase;
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.div1{
  .triangle(top);
}
.div2{
  .triangle(bottom);
} 

另一種寫法，@_ 所有方法都調用：

.triangle(@_){
  width:0;
  height:0;
  overflow:hidden;
}
.triangle(top,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:@c transparent transparent transparent;
  border-style:solid dashed dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.div1{
  .triangle(top);
}
.div2{
  .triangle(bottom);
} 

生成的css：

.div1 {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 5px;
  border-color: #cccccc transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
.div2 {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 5px;
  border-color: transparent transparent #cccccc transparent;
  border-style: dashed dashed solid dashed;
}

@arguments變量包含所有傳遞進來的參數。

//@argumentts變量
.border(@w:30px,@c:red,@s:solid){
  border:@arguments;
}
.test_arguments{
  border();
}

避免編譯，有時候需要輸出一些不正確的css語法或者使用一些Less不認識的專有語法，在前面加入~ 。

.test{
  filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

.test{
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); 
}

!important關鍵字，會為所有混合所帶來的樣式，添加上!important

.test{
  .border()!important;
}

JavaScript 賦值，在樣式表中使用Javascript——相當精彩。你可以使用表達式，也可以參考環境方向來使用反單引號。

@string: `"hello".toUpperCase()`; /* @string 變成 "HELLO" */ 
   
/* 你也可以使用前面提到的插值： */ 
@string: "HELLO";  
@var: ~`"@{string}".topUpperCase()`; /* 變為 "HELLO" */ 
   
/* 獲取文檔的信息 */ 
@height = `document.body.clientHeight`;

@import，用@import導入css或者less文件，減少服務器資源請求

less文件可以省略后綴名，同時可以在文件任意地方引入

css文件需要加入后綴名

用@import時，Koala編譯會讓軟件崩潰，用node吧！

注釋，可解析注釋和不可解析的注釋

變量用@定義，通過改變一個值改變多處樣式

嵌套，符合dom結構

運算，加減乘除四則運算規律

繼承，和js函數一樣

匹配模式，類似函數參數

@arguments 變量包含所有傳遞進來的參數、避免編譯~、!important為所有樣式加上!important

color函數：lighten(@color,10%)，darken(@color,10%)

導入：@import："style" less文件擴展名可選，@import:"style.css" 。減少服務器資源請求

字符串插入，字符串也可以用于變量中，然后通過@{name} 來調用

@base_url : "http://www.t1.chei.com.cn/common";  
background-image: url("@{base_url}/images/background.png"); 

兩者都是css預編譯

很多語法類似，思想一樣

Less環境以及使用方面比Sass簡單

條件語句與控制，less不支持。Sass可以使用if { } else { } 條件語句，以及for { }循環。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

koala輸出格式，LESS：normal（正常）、compress（壓縮）。而Sass提供4中輸出選項：nested（正常縮進）、expanded（括號不多帶帶占一行）、 compact（一個類一行顯示）和compressed （壓縮為一行）。

less基于純JavaScript，通過服務器端來處理的；Sass是基于Ruby的，在服務器端處理。

? 如果你是Ruby或HAML的粉絲，那么Sass會是你的好助手。對我來說，一個前端開發人員，我傾向于LESS，因為它便于引入和能夠使用JavaScript的表達式以及文檔屬性。對于新手來說更簡單可用。

? 對于剛接觸的css預編譯的前端，我推薦用Less。

http://www.lesscss.net

http://lesscss.cn/usage/

http://less.bootcss.com/usage/

http://www.lesscss.net/#using...

Less中文網

color顏色函數

如何在瀏覽器中調試less & sass

源碼，其中還有對應的PPT，想要看PPT的可以私信或留言給我，我發給大家。