摘要：例如解析現(xiàn)在流行的預(yù)編譯語(yǔ)言和的優(yōu)點(diǎn)簡(jiǎn)單，易于維護(hù)，管理更加容易高效的進(jìn)行開(kāi)發(fā)使用實(shí)現(xiàn)配色將變得非常容易。變量避免編譯，有時(shí)候需要輸出一些不正確的語(yǔ)法或者使用一些不認(rèn)識(shí)的專有語(yǔ)法，在前面加入。對(duì)于剛接觸的預(yù)編譯的前端，我推薦用。

? less官網(wǎng)：Less is More , Than CSS -少即是多，比CSS

? 官網(wǎng)gitHub：https://github.com/less/less.js

Less是一門css預(yù)處理語(yǔ)言，或是一種動(dòng)態(tài)樣式語(yǔ)言。擴(kuò)展了css語(yǔ)言，增加了變量、繼承、嵌套、運(yùn)算、函數(shù)等特性，使css更易維護(hù)和擴(kuò)展。（類似jquery）

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

例如：

@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;
}

現(xiàn)在流行的css預(yù)編譯語(yǔ)言：Less和Sass

簡(jiǎn)單，易于維護(hù)，CSS管理更加容易

高效的進(jìn)行開(kāi)發(fā)

使用Less實(shí)現(xiàn)配色將變得非常容易。

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

同時(shí)兼容CSS3

運(yùn)用GUI工具運(yùn)用工具koala或者SimpLess是來(lái)自動(dòng)解析成.css文件（已給大家講過(guò)，這里不在重復(fù)）

引用less.js進(jìn)行解析，在頁(yè)面引入less.js對(duì).less文件進(jìn)行解析。

less官網(wǎng)在線解析：http://less2css.org

運(yùn)用node來(lái)解析成css

利用gulp等自動(dòng)化工具進(jìn)行解析研究中

Source Map：編譯過(guò)程中生成 css 對(duì)應(yīng)的 map 文件。調(diào)試時(shí)使用，有了source map，瀏覽器里直接顯示less，非常方便

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

Autoprefix：自動(dòng)給 CSS3 元素加上瀏覽器前綴。

參考：知乎

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

1、內(nèi)聯(lián)樣式：

? 2、外聯(lián)樣式

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

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

第二步和第三步一起

注意：

如果加載多個(gè).less樣式表文件，每個(gè)多帶帶編譯，一個(gè)文件中定義的任何變量都無(wú)法再其他文件中訪問(wèn)。不會(huì)存在變量重復(fù)問(wèn)題。

在服務(wù)器環(huán)境下使用，本地直接打開(kāi)可能會(huì)報(bào)錯(cuò)！

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

其中還有一些高級(jí)配置，也可通過(guò)瀏覽器直接調(diào)試，具體見(jiàn)參考文檔。

不建議使用，增加服務(wù)器壓力，不利于調(diào)試。

先按照node.js

下載less的管理工具包

$ sudo npm install -g less

執(zhí)行方法解析成css文件

$ lesssc styles.less styles.css

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

$ npm install clean-css

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

less命令行用法

node上安裝即時(shí)編譯的插件

$ (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語(yǔ)法高亮

Brackets：內(nèi)置支持 語(yǔ)法高亮，還有一些擴(kuò)展BracketLESS

/** 可解析 **/

//不可解析

變量@來(lái)定義，允許多帶帶定義一系列通用的樣式，然后在需要的時(shí)候進(jìn)行調(diào)用。

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

在一個(gè)選擇其中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承，減少代碼量，代碼更清晰。代碼優(yōu)化考慮，最多嵌套三層。

有&時(shí)解析的是同一個(gè)元素或此元素的偽類，沒(méi)有&解析是后代元素

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

運(yùn)算提供了加減乘除操作，可以對(duì)任何數(shù)字、顏色、變量進(jìn)行運(yùn)算，可以實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系。和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;
}

運(yùn)算有順序，和平時(shí)的四則運(yùn)算一樣

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

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

色輪，spin(param1,param2)函數(shù)

互補(bǔ)色，互補(bǔ)的顏色正好在色輪相反的位置

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

三元色。我們可以進(jìn)一步探討顏色模型并且創(chuàng)建一個(gè)三元色結(jié)構(gòu)?！叭保櫭剂x，是由三種顏色組成。因此，我們將色輪分成三部分，并且用函數(shù)spin()來(lái)設(shè)置旋轉(zhuǎn)的度數(shù)：

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

混合色，mix(param1,param2)，對(duì)兩個(gè)顏色進(jìn)行混合

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

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

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

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

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

智能色彩輸出。LESS讓我們的樣式變得更智能。舉例來(lái)說(shuō)，我們能讓我們的樣式自己“思考”并決定什么顏色在什么條件下適用。假設(shè)我們正在創(chuàng)建一個(gè)網(wǎng)站模板，這是按鈕的
基本樣式，你打算用不同的顏色和風(fēng)格來(lái)擴(kuò)展它。但是我們?cè)鯓涌刂祁伾妮敵瞿兀课覀儺?dāng)然不希望深色的文字在深色的背景上，反之亦然。我們需要確保文本保留對(duì)比，以便于閱讀，這樣，contrast()函數(shù)就派上用場(chǎng)了。

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

混合可以將一個(gè)定義好的class A輕松引入到另個(gè)class B里面，從而簡(jiǎn)單實(shí)現(xiàn)class B繼承class A中的所有屬性。還可以帶參數(shù)調(diào)用，和函數(shù)一樣。

有默認(rèn)值,也可以不加默認(rèn)值，或者是不加參數(shù)、多個(gè)參數(shù)都可行。

需要帶括號(hào)，如果是沒(méi)有變量的時(shí)候可不帶括號(hào)。

例如：

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

匹配模式，即使同一個(gè)函數(shù)用不同的參數(shù)時(shí)調(diào)用不同的方法。例如寫(xiě)一個(gè)三角：

.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);
} 

另一種寫(xiě)法，@_ 所有方法都調(diào)用：

.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變量包含所有傳遞進(jìn)來(lái)的參數(shù)。

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

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

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

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

!important關(guān)鍵字，會(huì)為所有混合所帶來(lái)的樣式，添加上!important

.test{
  .border()!important;
}

JavaScript 賦值，在樣式表中使用Javascript——相當(dāng)精彩。你可以使用表達(dá)式，也可以參考環(huán)境方向來(lái)使用反單引號(hào)。

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

@import，用@import導(dǎo)入css或者less文件，減少服務(wù)器資源請(qǐng)求

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

css文件需要加入后綴名

用@import時(shí)，Koala編譯會(huì)讓軟件崩潰，用node吧！

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

變量用@定義，通過(guò)改變一個(gè)值改變多處樣式

嵌套，符合dom結(jié)構(gòu)

運(yùn)算，加減乘除四則運(yùn)算規(guī)律

繼承，和js函數(shù)一樣

匹配模式，類似函數(shù)參數(shù)

@arguments 變量包含所有傳遞進(jìn)來(lái)的參數(shù)、避免編譯~、!important為所有樣式加上!important

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

導(dǎo)入：@import："style" less文件擴(kuò)展名可選，@import:"style.css" 。減少服務(wù)器資源請(qǐng)求

字符串插入，字符串也可以用于變量中，然后通過(guò)@{name} 來(lái)調(diào)用

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

兩者都是css預(yù)編譯

很多語(yǔ)法類似，思想一樣

Less環(huán)境以及使用方面比Sass簡(jiǎn)單

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

koala輸出格式，LESS：normal（正常）、compress（壓縮）。而Sass提供4中輸出選項(xiàng)：nested（正?？s進(jìn)）、expanded（括號(hào)不多帶帶占一行）、 compact（一個(gè)類一行顯示）和compressed （壓縮為一行）。

less基于純JavaScript，通過(guò)服務(wù)器端來(lái)處理的；Sass是基于Ruby的，在服務(wù)器端處理。

? 如果你是Ruby或HAML的粉絲，那么Sass會(huì)是你的好助手。對(duì)我來(lái)說(shuō)，一個(gè)前端開(kāi)發(fā)人員，我傾向于LESS，因?yàn)樗阌谝牒湍軌蚴褂肑avaScript的表達(dá)式以及文檔屬性。對(duì)于新手來(lái)說(shuō)更簡(jiǎn)單可用。

? 對(duì)于剛接觸的css預(yù)編譯的前端，我推薦用Less。

http://www.lesscss.net

http://lesscss.cn/usage/

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

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

Less中文網(wǎng)

color顏色函數(shù)

如何在瀏覽器中調(diào)試less & sass

源碼，其中還有對(duì)應(yīng)的PPT，想要看PPT的可以私信或留言給我，我發(fā)給大家。