中文網(wǎng)站 lesscss.cn/#getting-st…
Less 是一門 CSS 預(yù)處理語言极祸，它擴展了 CSS 語言慈格，增加了變量、Mixin遥金、函數(shù)等特性浴捆，使 CSS 更易維護(hù)和擴展。
Less 可以運行在 Node 或瀏覽器端稿械。
1.安裝
$ npm install -g less
LESS的編譯常用的分為兩種：
1.開發(fā)環(huán)境下(開發(fā)項目的時候);
我們基于less-2.5.3.min.js進(jìn)行編譯：基于link把less文件導(dǎo)入选泻，
但是rel的值必須是stylesheet/less , 這樣導(dǎo)入的JS會找到這些less文件，把less編譯為css;
2.生產(chǎn)環(huán)境下(項目部署上線的時候)
我們需要把less編譯成CSS溜哮，然后讓頁面中導(dǎo)入的都是編譯后的CSS滔金， 需要基于node環(huán)境，并且基于less模塊進(jìn)行編譯(命令操作方式);
安裝NODE(安裝NPM)
$ npm install less -g(MAC最好設(shè)置sudo安裝 sudo npm install less -g);
找到對應(yīng)的less文件目錄茂嗓，在目錄中：$ lessc. xxx.less xxx.css / -x (設(shè)置-x是為了把代碼進(jìn)行壓縮);
<link rel="stylesheet/less" href="less/less.less">
<script src="js/less-2.5.3.min.js"></script>
1餐茵、LESS - 變量
相對CSS3來說，LESS的變量存儲一些值之后可以復(fù)用述吸，并且當(dāng)值發(fā)生改變時忿族，只需要修改變量的值即可;
如下锣笨，當(dāng)@A改成green，整個值為@A的都會改成green,如果項目中有N個元素需要同時改動道批，用起來很方便;
.box{
color:red;
}
// LESS
@A:red;
@images:"../images";
.box{
color:@A;
}
.box2{
color:@A;
img{
background:url('@{images}/XXX.jpg');
}
}
2错英、LESS - 嵌套
每一個大括號都是私有作用域，在里面用到得變量隆豹，先看是否私有的（是否在當(dāng)前作用域中聲明過和形參變量）椭岩，不是私有的找上級作用域中的;=>"類似于JS作用域鏈機制";
unit: LESS中內(nèi)置的函數(shù)，用來設(shè)置或者去除單位的;
// 普通CSS
.contain{
...
}
.contain .box{
...
}
.contain .box .box2{
...
}
// LESS
@W:100px;
@bg:green;
.contain{
//.contain的樣式
width:@W;
.box{
//.contain .box的樣式
backgroud:@bg;
@bg:gold;
.box2{
//.contain .box .box2的樣式;
}
}
}
如上代碼璃赡，.box的bg優(yōu)先看自己域有沒有判哥，有就使用自己域，沒有想上找(類似作用域的查找機制);
3碉考、LESS- 函數(shù)
1.每一個樣式類都能被充當(dāng)一個函數(shù)塌计，直接在其它的作用域中調(diào)取執(zhí)行（執(zhí)行特點：不需要傳參，可以不加小括號） =>這種函數(shù)的調(diào)用是把原有的代碼都原封不動的拿過來一份一模一樣的（包括其所有的后代樣式）
2.帶參數(shù)的函數(shù)（創(chuàng)建函數(shù)帶著小括號）侯谁，也是直接點的方式調(diào)用锌仅，但是編譯成為css的時候，函數(shù)不會編譯墙贱，但是函數(shù)執(zhí)行出來的代碼會放到每一個調(diào)取函數(shù)的選擇器中
3.less中的內(nèi)置函數(shù)
- unit
- darken
- lighten
1热芹、函數(shù)調(diào)用應(yīng)用 ——樣式復(fù)用的方法
1.函數(shù)調(diào)用
2.繼承
// 函數(shù)調(diào)用
.box1 {
@A1: lightgreen;
@W: 200;
@H: 200px;
width: unit(@W, px);
height: @H;
border: 5px solid @A1;
//.box1 img
img {
//@W-20這樣被理解為是一個變量名（變量名可以包含-）
width: unit((@W)-20, px);
height: unit(unit(@H, px)-20, px);
}
}
.box2{
.box1;// 執(zhí)行box1,如果結(jié)構(gòu)一樣，可以復(fù)制全部樣式;
}
// 2.樣式繼承
//寫法1
.box2 {
&:extend(.box1);
}
//寫法2
.box2:extend(.box1) {}
基于繼承也能實現(xiàn)樣式的公用（原理：兩個樣式類公用同一套代碼嫩痰，但是后代樣式不能被繼承）
2剿吻、函數(shù)調(diào)用應(yīng)用 —— 公共方法調(diào)用
項目中經(jīng)常會有一些公共樣式窍箍，我們一般可以寫一些公共的方法放在文件夾串纺，用的時候直接調(diào)用即可；
// 公共文件內(nèi)容common（用來存放公共方法）
.func_center(@W:100,@H:100){
position: absolute;
top: 50%;
left: 50%;
margin:unit(-(unit(@H,px)/2),px) 0 0 unit(-@H/2,px);
}
.func_transition(@property:all,@duration:.5s,@timing:linear,@delay:0s){
transition:@arguments;
}
// less.less內(nèi)容
// 先引入公共方法common; (reference)表示less文件編譯CSSA時椰棘，此文件不編譯
@import (reference) './common.less';
//less樣式引入公共方法
.box1 {
@A1: lightgreen;
@W: 200;
@H: 200px;
.func_center(@W, unit(@H, px)); //引入居中的函數(shù);
// unit: LESS中內(nèi)置的函數(shù)纺棺，用來設(shè)置或者去除單位的(如果有就去除，沒有就加上)
img {
.func_transition;
.func_transition(@duration: 1s);
.func_transition(opacity, .3s, ease, 0s);
}
}
3邪狞、darken函數(shù)
<button class="btn">點擊</button>
LESS樣式
@C1:pink;
.btn {
width: 100px;
height: 50px;
background: @C1;
&:hover {
background: darken(@C1, 20%);
}
}
鼠標(biāo)滑過之前
鼠標(biāo)滑過之后祷蝌，顏色變成深20%;
4、lighten函數(shù)
它增加了元素中顏色的亮度帆卓。 它有以下參數(shù)：
color ：它代表顏色對象巨朦。
amount ：它包含0 - 100%之間的百分比。
方法：它是可選參數(shù)剑令，通過將其設(shè)置為相對糊啡，用于相對于當(dāng)前值進(jìn)行調(diào)整。
@C1:pink;
.btn {
width: 100px;
height: 50px;
background: @C1;
&:hover {
background: lighten(@C1, 50%);
}
}
鼠標(biāo)滑過之前
鼠標(biāo)滑過之后吁津，顏色變成淺棚蓄，跟darken剛好相反;
.loop() when ()
.loop(@n) when (@n<=4){
.loop(@n+1);
.column-@{n}{
width:unit(@n*10,%);
}
}
.loop(1);
// 初始值為@n=1,條件@n<=4;符合條件，每次循環(huán)@n+1;.column 每一個width:@n*10%;
// 編譯后的CSS
.column-4 {
width: 40%;
}
.column-3 {
width: 30%;
}
.column-2 {
width: 20%;
}
.column-1 {
width: 10%;
}
LESS樣式轉(zhuǎn)譯為CSS
在NODE環(huán)境下，找到less存放文件處梭依，文件欄輸入cmd回車稍算，輸入密令lessc xxx.less xxx.css / -x
xxx.less 指需要編譯的less文件名
xxx.css 指編譯后存放的css文件名 -x 指壓縮文件
