2.1變量
2.1.1 變量語法
使用@來定義變量性芬，變量名自定義闹伪。
@color: #00f;
此時定義了一個變量color其值為十六進制顏色值
使用變量的時候需要加上@滞谢，表示取出color變量的值省古。
使用變量：
h1 {
color: @color;
}
2.1.2 變量的作用域
可以定義多個變量，但是當多個變量同名的時候，應(yīng)該使用哪個變量的值呢合是？less和其他語言類似了罪，采用就近原則，也即如果當前作用域下有該變量則使用該變量的值聪全，否則逐層作用域向上查找泊藕，直到查找失敗，解析錯誤难礼，如果配置了File Wather控制臺會報錯娃圆，并指向出錯的less文件位置：
比如：
@color:#00f;
div {
@color: #f00;
color: @color;
}
此時可以看到，color使用的是最近一級的@color變量的值
特別的是蛾茉，查看以下代碼：
@color:#00f;
div {
@color: #f00;
.my {
@color: #ff0;
background-color: @color;
@color: #0f0;
}
}
如果同一作用域下讼呢，使用該變量的位置比變量定義位置靠前，那么該使用哪個變量的值呢谦炬？由于less對變量的處理是先對變量統(tǒng)一處理悦屏，也即按照變量順序進行處理之后，再對使用其的地方進行賦值操作键思，因此會使用最后一次定義變量的地方础爬。
也即結(jié)果為：
2.1.3 字符串插值
類似于es6的模板字符串一樣，可以在字符串中使用變量吼鳞。
語法：
@variable: "xxx";
將變量放入到{}中
@{variable}
使用：
@url: "/images/";
div {
width: 200px;
height: 200px;
background-image: url("@{url}1.jpg"); // 結(jié)果為/images/1.jpg
}
2.1.4 選擇器插值
類似于字符串插值一樣看蚜，將變量放入到{}中。不同的是赔桌，選擇器插值則是作為對選擇器的定義
使用：
@mydiv: div;
@{mydiv} {
width: 200px;
height: 200px;
}
編譯之后：
div {
width: 200px;
height: 200px;
}
2.1.5 媒體查詢定義變量的方式
由于“~”后面的值是不被編譯的供炎，所以可以用作媒體查詢的參數(shù)。
使用：
@mediaQuery: ~"(max-width: 600px)";
@media screen and @mediaQuery {
div {
width: 200px;
height: 200px;
background-color: #898900;
}
}
2.1.6 變量之間相互使用
-
不加
@如果一個變量直接引用一個變量疾党，而不加
@音诫，則使用該變量的值的時候，需要加上兩個@@color: #00f; @mycolor: color; div { color: @@mycolor; }類似于先取出color雪位，然后再對color變量進行值得提取
-
加上
@如果引用得變量加上了
@纽竣，表明直接使用得是值，此時和使用普通變量得用法一致@color: #00f; @mycolor: @color; div { color: @mycolor; }
2.2 混合
2.2.1 繼承屬性
可以在一個選擇器內(nèi)部引用已經(jīng)定義好的類樣式和ID選擇器樣式(只能是這兩個選擇器樣式)茧泪，那么這個選擇器就可以直接使用引用的選擇器樣式屬性
使用：
.div {
width: 200px;
height: 200px;
}
span {
.div;
}
// 編譯之后的結(jié)果：
.div {
width: 200px;
height: 200px;
}
span {
width: 200px;
height: 200px;
}
可以看到引用的樣式也同樣出現(xiàn)在編譯之后的文件中
2.2.2 帶參數(shù)混合
帶參數(shù)混合就類似函數(shù)一樣的性質(zhì)。
以上繼承屬性的方式是直接使用繼承之后的屬性聋袋，除此之外队伟，還可以傳入?yún)?shù)給繼承的類/ID樣式，便于動態(tài)引用幽勒，同時便于擴展
使用：
.div(@width) {
width: @width;
height: @width;
}
span {
.div(20px);// 傳參過去嗜侮，類似于函數(shù)
}
// 編譯之后的結(jié)果
span {
width: 20px;
height: 20px;
}
可以看到引用的樣式不會出現(xiàn)在編譯之后的文件中
注意：如果繼承的樣式需要參數(shù)，則必須傳參過去，否則會出錯锈颗。
除了傳遞一個參數(shù)過去以外顷霹，還可以傳遞多個參數(shù)，多個參數(shù)之間使用分號;分隔击吱。
.div(@width;@height) {
width: @width;
height: @height;
}
如果存在選擇器一樣淋淀，參數(shù)個數(shù)不一致的情況，會出現(xiàn)什么情況呢覆醇？
CSS是順序編譯朵纷，當找到第一個滿足要求的選擇器，則進行匹配
比如：
.div(@width) {
width: @width;
height: @width;
}
.div(@width;@height) {
width: @width;
height: @height;
}
span {
.div(200px);
}
// 編譯之后的結(jié)果為：
span {
width: 200px;
height: 200px;
}
由于第一個匹配成功永脓，則繼承第一個樣式袍辞。
但是如果參數(shù)個數(shù)一致，選擇器名稱也一致呢常摧？
只要滿足要求搅吁，就進行匹配，并繼承
比如：
.div(@width) {
width: @width;
}
.div(@height) {
height: @height;
}
span {
.div(200px);
}
// 編譯之后的結(jié)果為：
span {
width: 200px;
height: 200px;
}
由于以上兩個都匹配落午，所以都會繼承
2.2.3 隱藏屬性繼承
直接繼承屬性谎懦，繼承的父樣式同樣也會出現(xiàn)在編譯之后的結(jié)果中，而帶參數(shù)混合的方式繼承板甘，繼承的父樣式不會出現(xiàn)在編譯之后的結(jié)果中党瓮。
有時，只是為了使用繼承的公共的樣式盐类，而在html頁面中不會單獨使用公共樣式寞奸，所以不想讓公共樣式出現(xiàn)在編譯之后的結(jié)果中。
所以結(jié)合上面兩種寫法在跳，可以使用隱藏屬性繼承的方式枪萄，既繼承了公共樣式，又不讓其出現(xiàn)在編譯之后的結(jié)果中猫妙。
使用：
.div() {
width: 200px;
height: 200px;
}
span {
.div();
}
// 編譯之后的結(jié)果 只包含span選擇器樣式
span {
width: 200px;
height: 200px;
}
注意：()不能省略
2.2.4 默認值混合
可以給參數(shù)設(shè)置默認值瓷翻，這樣可以使用默認值且不用傳參的情況下繼承樣式
使用：
.div(@width: 100px) {
width: @width;
height: @width;
}
span {
.div; // 也可以是.div();
}
2.2.5 @arguments參數(shù)
類似于js中函數(shù)中內(nèi)置對象arguments一樣，可以獲取傳遞的全部參數(shù)值割坠，less中@arguments也可以獲取全部的參數(shù)值齐帚，但也僅限于獲取參數(shù)值，不能做其他操作彼哼。但是有時不想對單個參數(shù)進行操作对妄，只用全部的參數(shù)值的時候還是很有用的。
使用：
.transition(@property: all;@duration: 4s;@delayTime: 2s;@TimingFuction: ease) {
-moz-transition: @arguments;
-webkit-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
span {
.transition();
}
// 編譯之后的結(jié)果
span {
-moz-transition: all 4s 2s ease;
-webkit-transition: all 4s 2s ease;
-o-transition: all 4s 2s ease;
transition: all 4s 2s ease;
}
2.2.6 !important
如果給一個一個屬性添加!important會很麻煩敢朱，此時可以在引用父級樣式的時候加上!important剪菱，引用的父級樣式中所有屬性都會加上!important屬性摩瞎。
使用：
.div(@width;@height) {
width: @width;
height: @height;
}
span {
.div(100px,100px)!important;
}
// 編譯之后的結(jié)果
span {
width: 100px !important;
height: 100px !important;
}
2.2.7 擴展運算符...
可以使用擴展運算符...來不指明有多少個參數(shù)，而參數(shù)的獲取通過@arguments參數(shù)來獲取孝常。
使用：
.div(...) {
width: @arguments;
}
span {
.div(100px);
}
// 編譯之后的結(jié)果為
span {
width: 100px;
}
2.2.8 模式匹配
只有滿足匹配要求的混合才會被使用旗们。混合中的變量可以匹配任何值构灸，非變量形式的值只有與傳入的值完全相等時才可以匹配成功。
使用：
.border(soild,@size) {
border: @size;
}
.div(@height) {
height: @height;
}
span {
.border(soild,2px);
}
只有傳入的值是solid才能與.border類匹配成功，否則匹配不成功。
所以非變量形式的值也即不加@的值，此值只是用于進行繼承限定的，不用于傳參使用。
2.2.9 條件混合
-
when
只有當when中的條件滿足的時候，才會應(yīng)用該樣式
// 當@a的值大于400px的時候，才能使用改樣式，等效于when(true)的時候才可以 .minin(@a) when (@a > 400px) { width: @a; } #header { .minin(500px);// 滿足要求 } // 編譯之后的結(jié)果為： #header { width: 500px; // 成功引入 }而如果不滿足：
.minin(@a) when (@a > 400px) { width: @a; } #header { .minin(200px); } // 編譯之后的結(jié)果： 由于不滿足條件幽邓，所以沒有成功引入，也即沒有樣式如果變量的值為false/true，變量可以單獨寫在when括號中。
.minin(@b) when (@b) { width:200px; } #header { .minin(false); } -
多個條件
多個條件使用
,進行分隔漾脂，且每個條件單獨寫在一個括號內(nèi)坦冠。只要有一個條件滿足，則這個選擇器被選中佛玄。類似于或運算。.minin(@a,@b) when (@b),(@a<= 200px) { width: @a; } #header { .minin(200px,false); } // 編譯之后的結(jié)果為： #header { width: 200px; } -
and
多個條件都滿足時才被選中
.minin(@a,@b) when (@b)and(@a<= 200px) { width: @a; } #header { .minin(200px,false);// 沒有被選中奥吩，沒有樣式輸出 } -
not
當條件不滿足的時候被選中哼蛆，取反操作
.minin(@b) when not(@b) { width: 200px; } #header { .minin(false); } // 編譯之后的結(jié)果為： #header { width: 200px; }not只作用于一個條件，不能作用于多個條件
.minin(@a,@b) when not(@b)and(@a> 200px) { width: @a; } #header { .minin(200px,false); } // 由于not只作用于(@b)條件霞赫，而(@a > 200px)不滿足條件腮介，所以沒有樣式輸出
2.3 嵌套語法
Less提供了使用嵌套代替層疊或與層疊結(jié)合使用的能力。使用Less書寫可以模仿HTML的組織結(jié)構(gòu)
假設(shè)有以下html結(jié)構(gòu)
<main>
<section>
<div></div>
</section>
</main>
編寫類似于html結(jié)構(gòu)的less文件端衰，一層一層嵌套類似于使用結(jié)構(gòu)選擇器對元素逐層查找一樣叠洗，和后代選擇器效果一致甘改。且內(nèi)層嵌套會繼承外層選擇器屬性。
main {
width: 200px;
height: 200px;
section {
width: 100%;
height: 50%;
div {
width: 50%;
height: 50%;
background-color: #0ff;
}
}
}
編譯之后的css文件為：
main {
width: 200px;
height: 200px;
}
main section {
width: 100%;
height: 50%;
}
main section div {
width: 50%;
height: 50%;
background-color: #0ff;
}
2.3.1 &的用法
&表示對父選擇器的引用灭抑，一般用在偽類選擇器上十艾。
在一個內(nèi)層選擇器的前面，如果沒有 & 符號腾节，則這個內(nèi)層選擇器會被解析為父選擇器的后代忘嫉。如果內(nèi)層選擇器前面有一個 & 符號，則內(nèi)層選擇器會被解析為父選擇器自身或父選擇器的偽類案腺。
有以下html代碼：
<main>
</main>
需要選中當鼠標懸浮時的樣式庆冕，也即main:hover，
如果是以下寫法：
main {
width: 200px;
height: 200px;
main:hover {
background: #000;
}
}
因為嵌套方式是選擇后代元素劈榨，所以編譯之后的結(jié)果是：
main {
width: 200px;
height: 200px;
}
main main:hover {
background: #000;
}
顯然不是我們想要的結(jié)果访递，我們并不想要作為后代選擇器的方式出現(xiàn)，而是兄弟選擇器的方式并排出現(xiàn)鞋既，所以此時可以使用&
main {
width: 200px;
height: 200px;
&:hover {
background: #000;
}
}
以上代碼的解析過程是：當解析到&的時候力九，&會被選擇器替換替換，且與父選擇器出現(xiàn)在同一層邑闺，也即：
main {
width: 200px;
height: 200px;
}
main:hover {
background: #000;
}
應(yīng)用：
2.3.1.1 重復(fù)引用父選擇器
.my {
width: 200px;
height: 200px;
&-one {
background-color: #f00;
}
&-two {
background-color: #00f;
}
&-three {
background-color: #ff0;
}
}
編譯之后的結(jié)果為：
.my {
width: 200px;
height: 200px;
}
.my-one {
background-color: #f00;
}
.my-two {
background-color: #00f;
}
.my-three {
background-color: #ff0;
}
2.3.1.2 更改選擇器的順序
有些時候可能需要將內(nèi)層選擇器放在父選擇器之前跌前，此時我們可以將 & 放在當前選擇器后面來完成。
.my {
width: 200px;
height: 200px;
main & {
background-color: #00f;
}
}
編譯之后的結(jié)果為：
.my {
width: 200px;
height: 200px;
}
main .my {
background-color: #00f;
}
2.4 命名空間
出于組織結(jié)構(gòu)或僅僅是為了提供一些封裝的目的陡舅，可以對混合進行分組抵乓。對一些沖突的變量規(guī)范于不同的命名空間中，同時也便于多次重復(fù)使用與擴展靶衍。
定義一個命名空間灾炭，可以使用任何的類/ID選擇器，作為命名空間颅眶，此時命名空間的性質(zhì)類似于函數(shù)蜈出。
.my() {
}
這里定義了一個命名空間.my，加上()涛酗，使其在編譯之后的文件中不輸出铡原。
接著便可以在這個命名空間中書寫混合。
.my() {
.a {
width: 20px;
height: 20px;
.b {
width: 200px;
height: 200px;
}
&:hover {
background-color: #0ff;
}
}
}
使用命名空間中的混合商叹。類似于后代選擇器一樣選擇指定的選擇器進行使用燕刻。
這里使用>表用來選擇
.header {
.my>.a;
}
// 結(jié)果為：
.header {
width: 20px;
height: 20px;
}
.header .b {
width: 200px;
height: 200px;
}
.header:hover {
background-color: #0ff;
}
以上代碼的意思表示：選擇命名空間中的.a選擇器作為我要引入的樣式，所以.a中的樣式被全部引入到.header選擇器中剖笙，感覺就好像.header替代了.a一樣卵洗。
如果再先下一層引入呢？
.header {
.my>.a>.b;
}
// 結(jié)果為：
.header {
width: 200px;
height: 200px;
}
以上代碼就很好解釋了弥咪，選擇命名空間中.b選擇器作為要引入的樣式过蹂，所以.b中的樣式被全部引入到.header選擇器中十绑，感覺就好像.header替代了.b一樣。
除了可以使用>表示逐層選擇榴啸，還可以使用空格
以下代碼效果一致：
.header {
.my .a .b;
}
// 結(jié)果為：
.header {
width: 200px;
height: 200px;
}
