less學(xué)習(xí)（學(xué)習(xí)筆記，取所需即可）
寫在前面：Less 是一門 CSS 預(yù)處理語言，它擴(kuò)展了 CSS 語言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。Less 可以運(yùn)行在 Node 或?yàn)g覽器端。
1，注釋
//編譯后不保留
/**/編譯后保留
2，變量
@color:red;
.wrapper{
width:200px;
height: 200px;
border: 1px solid @color;
如果需要定義屬性名和選擇器的變量，用的時(shí)候加{}花括號(hào)
變量的延遲加載
第六行中的變量@var，需要等到.brass這個(gè)塊里面所有的css加載完再在加載
并且當(dāng)前塊的變量只能找本塊及向上。不能調(diào)用子塊變量
記住就是簡(jiǎn)單的字符替換，變量，就是替換字符。結(jié)構(gòu)也是用空格表示子父之間dom
3，嵌套規(guī)則
除了子父級(jí)中的嵌套，當(dāng)想表示和本身是同一級(jí)的時(shí)候使用&
.inner{
@var: green;
width:100px;
height: 100px;
border: 1px solid @color;
&:hover{
background-color: black;
}
}
加了&等同于----（.inner:hover{樣式}），不加則為（.inner :hover）
4，混合
混合就是將一系列屬性從一個(gè)規(guī)則集引入到另一個(gè)規(guī)則集的方式。（反過來就是將一些共同的代碼提取出來放入一個(gè)規(guī)則中，然后再其他規(guī)則中套用這個(gè)規(guī)則使得代碼簡(jiǎn)化，靈活化）
1，普通混合
2，不帶輸出的混合(就是將不需要輸出的規(guī)則后面加（）如：.inner(){ width：200px；})
3，帶參數(shù)的混合（實(shí)參和形參不吻合會(huì)報(bào)錯(cuò)）
4，帶參數(shù)并且有默認(rèn)值的混合
5，帶多個(gè)參數(shù)的混合
6，命名參數(shù)（當(dāng)形參和實(shí)參個(gè)數(shù)不匹配，可以指定為具體的實(shí)參）
居中樣式規(guī)則集
.juzhong(@w:100px,@h:100px,@c:red){
width:@w;
height: @h;
border: 1px solid @c;
position: absolute;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-250px;
}
.wrapper{
.juzhong(500px,500px);
.inner{
.juzhong(200px,200px,@c:pink);
}
}
7，匹配模式
引入外部less文件 @import './css/01.css'
匹配模式：當(dāng)簡(jiǎn)單的混合不能滿足定制一些東西的時(shí)候。比如說需要一個(gè)可以設(shè)置方向和顏色的三角形。這個(gè)是不能簡(jiǎn)單替換變量可以實(shí)現(xiàn)的。less中也沒有條件語句來判斷需要的是向上的邊框還是向下的。就有了模式。將那些不參與定制的語句放到一個(gè)集合中，其他的寫成不同的模式。在調(diào)用 .trangle(L, 30px, red)時(shí)同時(shí)會(huì)調(diào)用.trangle(@_)。
<style type="text/less">
.trangle(@_){
width:0px;
height:0px;
}
.trangle(L,@c,@w){
border-width: @w;
border-style: dashed solid dashed dashed;
border-color: transparent @c transparent transparent;
}
.trangle(R,@c,@w){
border-width: @w;
border-style: dashed dashed solid dashed;
border-color: transparent transparent @c transparent;
}
.wrapper{
.trangle(L, 30px, red)
}
</style>
<script src="less.js"></script>
</head>
<body>
<div class="wrapper">
</div>
</body>
8，arguments變量(雞肋)
.border(@w,@s,@c){
border: @arguments;
}
.wrapper{
.border(1px,solid,red)
}
最后編譯：
.wrapper{
border: 1px solid red;
}
less運(yùn)算
在less中可以進(jìn)行加減乘除的運(yùn)算
less中計(jì)算的雙方只需要一方帶有單位
width:(100+200px)
css原生計(jì)算：cacl（100px+100）實(shí)際是交給瀏覽編譯
less繼承
.wrapper .inner:nth-child(1){}
nth-child表示找到.inner的父元素（.wrapper）的子元素中第一個(gè)，并且class為.inner的
/* 在每組兄弟元素中選擇第四個(gè) <p> 元素 */
p:nth-of-type(4n) {
color: lime;
}
所以總結(jié)來說：nth-child和nth-of-type都是找和前面的元素同級(jí)的元素。在less中，選中.wrapper下的第一個(gè).inner應(yīng)該用&來寫表示同級(jí)
.wrapper{
.inner{
&:nth-child(1){
}
}
}
編譯后的css，會(huì)創(chuàng)建一個(gè)組合的選擇器，加了all就會(huì)把這個(gè)類所有的狀態(tài)都加進(jìn)去
繼承和混合的區(qū)別
1，繼承的性能比混合高
2，繼承的靈活度比混合低（不能傳遞參數(shù)）
less避免編譯
padding:~"cacl(100+10px)"
使用~“”包裹的語句less不會(huì)處理直接字符串輸出
