less的一些用法整理
前提理解：第一個，less是單獨的一種文件，可以理解為css的升級版，完全按照css寫也沒問題，不過它提供了很多便利的東西，可以省好多代碼量。第二個，html只認css,所以需要配套一些軟件將less解析成css,引用時候，直接引用css就好。gulp,koala 都是常用的，Koala好像簡單且方便一點。
?
嵌套
less的優(yōu)勢有很多，最常用也是最讓人舒坦的應(yīng)該就是它的嵌套規(guī)則。 我們寫css時如果元素過多，每個都像
.test .contnet ul li{ }
這樣寫的話，大概會瘋，結(jié)構(gòu)不清晰，查找起來也不知道哪塊歸哪塊，反正長長的都是css。在less中，則可以這樣寫
.test{
.content{
ul{
li{}
}
}
}
看起來好像很煩，其實不是，因為css要寫起來，需要四個塊，每個塊都得把父元素寫清楚，不然有可能重名出錯（尤其項目大起來的時候，幾十個頁面，class重名太常見了），而less只需要一個塊， .test連同其后代元素全部在它的包裹內(nèi)設(shè)定好，每個元素名稱只需要寫一次就夠了。
&
這個符號在less中可以代替父級元素，舉個栗子
a{
color：blue；
&：hover{
color：red；
}
}
再比如，父元素叫.wrap? 兒子元素中有一個叫 .wrap_2，那就可以這樣寫
.wrap{
&_2{}
}
優(yōu)點：塊和塊界限可以更清楚，很多東西不需要并列寫；時不時還可以偷個懶，比如爸爸類的名字改來改去的時候，寫&也省心好多。
?
變量
重要說明：變量需要@開頭，比如@width，@height,名字可以隨便取
定義的話在相應(yīng)位置直接寫就好，類似于這種(寫.box外面也可以)
.box{
@width:200px;
@height:500px;
@my_color:#ccc;
width:@width;
height:@height;
background:@my_color;
}
例子比較簡單可能看不出什么優(yōu)越性，事實上大量重復(fù)的，或者是統(tǒng)一的樣式使用變量就很方便，而且便于查找和修改，比如統(tǒng)一的背景色，或者統(tǒng)一的字體，字體大小；
注意點：變量有作用域，只能給自己和后代元素用，出了最外層的{}，別的類沒法調(diào)用。
?
運算
有變量當然可以計算，比如
@width:500px;
.box{
width：@width-50;
}
意思就是450px,這里的計算加減乘除皆可，單位可加可不加。
?
混合
有點類似于函數(shù)的調(diào)用，這里的話就要說點別的東西了，工作前，我對于css的理解大概就是給html對應(yīng)的元素設(shè)定樣式，工作后我才發(fā)現(xiàn)，不對，css應(yīng)該是羅列各種各樣的樣式，html里只是選擇了其中的一款。為什么會產(chǎn)生這種感覺，因為樣式會重復(fù)，組件會重復(fù)，這個頁面有個tab切換，別的頁面也有tab切換；這個位置有個按鈕，其他好幾個位置也有一個按鈕。如果每個頁面都私人定制，那就意味著我們需要不斷的寫重復(fù)的東西，在css中我們沒有辦法，最多花點時間拷貝過來，但是less中可以方便很多。
/*這里是按鈕的統(tǒng)一設(shè)置，最好寫最外層，方便調(diào)用*/
.btn{
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:#55E276;
cursor:pointer;
}
//下方為各種位置的按鈕，less中允許雙斜線的注釋
.submit,.buy,.star{
.btn;
}
一次書寫，直接調(diào)用就好。
但按鈕和按鈕畢竟是不一樣的，所以需要有所區(qū)別，區(qū)別可能是顏色，也可能是大小長度，解決方法有兩個，planA：公用部分直接調(diào)用，區(qū)別的部分自己寫。planB：傳入?yún)?shù)。
?
planA
/*這里是按鈕的統(tǒng)一設(shè)置，最好寫最外層，方便調(diào)用*/
.btn{
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:#55E276;
cursor:pointer;
}
//下方為各種位置的按鈕，less中允許雙斜線的注釋
.submit{
.btn;
box-shadow:0 1px 5px #ccc;
}
.star{
.btn;
&:hover{
background:#E65151;
}
}
.buy{
.btn;
border:1px solid #ccc;
}
?
planB
/*傳參類似于函數(shù)，所以這里的變量作用域僅在{}之內(nèi)，取什么名字都隨意*/
.btn(@color){ //這里加個了括號放參數(shù)
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:@color; //用參數(shù)表示
cursor:pointer;
}
//下方為各種位置的按鈕，背景顏色作為參數(shù)傳入
.submit{
.btn(red);
box-shadow:0 1px 5px #ccc;
}
.star{
.btn(#55E276);
&:hover{
background:#E65151;
}
}
?
其實最后我把兩個方案相當于合并了一下，共用但是有區(qū)別的用傳參解決，獨有的，直接寫就可以了。
傳參也可以放入默認值，具體這樣寫
.btn(@width:500px){width:@width;}
調(diào)用時候是這樣的
.submit{
.btn();? //這里一定要加括號，需要改默認值，直接寫括號里，否則寬度就是500px
}
?
匹配模式
還是上面的例子，如果我一定要用一個.btn(xxxxx)解決，涵蓋所有按鈕樣式，可不可以，答案是可以。匹配模式就是這種可以隨便定制的東西，其實理解起來也很簡單，括號里多一個命名而已，比如調(diào)用這個.btn(no_border,#55E276); 表示無邊框樣式，背景色為#55E276(注意，命名是沒有@符號的)，如果調(diào)用.btn(border,#E65151); 表示有邊框樣式，背景色為#E65151，具體寫法如下
.btn(@_,@color){ //不同命名的公共部分要這樣寫，必須是@_，表示公共部分
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:@color; //用參數(shù)表示
cursor:pointer;
}
.btn(no_border,@color){
//可以直接這樣放著，或者寫個border：none?? 這里的列子舉得不好，如果換成左浮動右浮動，或者絕對定位的上下左右，應(yīng)該更好點
}
.btn(border,@color){
border:1px solid #ccc;
}
?
.btn(border); //表示默認背景色有邊框，邊框顏色也可以寫個參數(shù)進去
.btn(border,#E65151)//表示背景色#E65151，有邊框
?
?
小結(jié)
常用的大概就上面那些，避免編譯的? ~"..." 或者 用于調(diào)試時候的!impotant 這些我都沒怎么用過。less相關(guān)的函數(shù)還有一些，一些高級功能可以去官網(wǎng)上查找，但就我目前而言，工作中使用上面的肯定足夠足夠了，它已經(jīng)節(jié)省了我大量的時間，免去了很多重復(fù)勞動。
轉(zhuǎn)載于:https://www.cnblogs.com/grey-zhou/p/5796496.html
總結(jié)
以上是生活随笔為你收集整理的less的一些用法整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java中的四种引用方式的区别
- 下一篇： 【转】PowerShell入门（五）：C