less學(xué)習(xí)（學(xué)習(xí)筆記捧毛，取所需即可）
寫在前面：Less 是一門 CSS 預(yù)處理語言吼畏，它擴(kuò)展了 CSS 語言昔汉，增加了變量懈万、Mixin、函數(shù)等特性靶病，使 CSS 更易維護(hù)和擴(kuò)展会通。Less 可以運行在 Node 或瀏覽器端。
1娄周，注釋
//編譯后不保留
/**/編譯后保留
2涕侈，變量
@color:red;
.wrapper{
width:200px;
height: 200px;
border: 1px solid @color;
如果需要定義屬性名和選擇器的變量，用的時候加{}花括號
變量的延遲加載
第六行中的變量@var煤辨，需要等到.brass這個塊里面所有的css加載完再在加載
并且當(dāng)前塊的變量只能找本塊及向上裳涛。不能調(diào)用子塊變量
記住就是簡單的字符替換，變量众辨，就是替換字符调违。結(jié)構(gòu)也是用空格表示子父之間dom
3，嵌套規(guī)則
除了子父級中的嵌套泻轰，當(dāng)想表示和本身是同一級的時候使用&
.inner{
@var: green;
width:100px;
height: 100px;
border: 1px solid @color;
&:hover{
background-color: black;
}
}
加了&等同于----（.inner:hover{樣式}），不加則為（.inner :hover）
4且轨，混合
混合就是將一系列屬性從一個規(guī)則集引入到另一個規(guī)則集的方式浮声。（反過來就是將一些共同的代碼提取出來放入一個規(guī)則中，然后再其他規(guī)則中套用這個規(guī)則使得代碼簡化旋奢，靈活化）
1泳挥，普通混合
2，不帶輸出的混合(就是將不需要輸出的規(guī)則后面加（）如：.inner(){ width：200px至朗；})
3屉符，帶參數(shù)的混合（實參和形參不吻合會報錯）
4，帶參數(shù)并且有默認(rèn)值的混合
5锹引，帶多個參數(shù)的混合
6矗钟，命名參數(shù)（當(dāng)形參和實參個數(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)簡單的混合不能滿足定制一些東西的時候吨艇。比如說需要一個可以設(shè)置方向和顏色的三角形。這個是不能簡單替換變量可以實現(xiàn)的腾啥。less中也沒有條件語句來判斷需要的是向上的邊框還是向下的东涡。就有了模式冯吓。將那些不參與定制的語句放到一個集合中，其他的寫成不同的模式疮跑。在調(diào)用 .trangle(L, 30px, red)時同時會調(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運算
在less中可以進(jìn)行加減乘除的運算
less中計算的雙方只需要一方帶有單位
width:(100+200px)
css原生計算：cacl（100px+100）實際是交給瀏覽編譯
less繼承
.wrapper .inner:nth-child(1){}
nth-child表示找到.inner的父元素（.wrapper）的子元素中第一個祖娘，并且class為.inner的
/* 在每組兄弟元素中選擇第四個 <p> 元素 */
p:nth-of-type(4n) {
color: lime;
}
所以總結(jié)來說：nth-child和nth-of-type都是找和前面的元素同級的元素失尖。在less中，選中.wrapper下的第一個.inner應(yīng)該用&來寫表示同級
.wrapper{
.inner{
&:nth-child(1){
}
}
}
編譯后的css贿条，會創(chuàng)建一個組合的選擇器雹仿，加了all就會把這個類所有的狀態(tài)都加進(jìn)去
繼承和混合的區(qū)別
1，繼承的性能比混合高
2整以，繼承的靈活度比混合低（不能傳遞參數(shù)）
less避免編譯
padding:~"cacl(100+10px)"
使用~“”包裹的語句less不會處理直接字符串輸出
