一、什么是less
less是css的擴展。他擴展了變量、mixin、函數等功能，使得css代碼寫的更有效率、更爽（哈哈），本篇主要先介紹less的變量
二、less的變量
相信在寫css的時候，你總會發現，你某些屬性的值一直都是重復的，例如系統的背景顏色、logo的地址等等，
因此通過less 的變量，你可以將重復的值用一個變量保存起來，然后就直接用！！！
語法： @+變量名
例子：
@base-color:#ff0000;
.one {
background-color:@base-color;
color:#ffffff;
}
然后將其轉化為css則為：
.one {
background-color:#ff0000;
color:#ffffff;
}
呀，沒錯，就只是直接替換而已，是不是很簡單，
當然了，less變量不僅可以用來表示屬性的值，還可以用來表示選擇器、屬性名稱、URL等
首先是選擇器：
@my-select : one ;
.@{my-select} {
background-color:red;
}
//編譯后如下：
.one { background-color:red; }
實際上還是直接將變量替換成類名而已啦，只是在使用時需要注意格式為：@{變量}
屬性名稱:
@property :color
.one {
@{property}:white;
background-@{property}:red;
}
//編譯后
.one {
color:white;
background-color:red;
}
屬性名稱也是同理，同時你還會注意到，變量可以替換到屬性名稱的一部分，background-color就是這樣子啦
URL：
@url: "./styles"
.one {
background:url(@{url}/img/1.jpg)
}
//css引用
@import "@{url}/themes/font.less"
我們可以通過將路徑的地址存儲到變量中，可以直接替換掉圖片或者css引用中的路徑
在使用變量時，不僅可以存儲上述各項信息，同時也可以用來存儲變量名，是的，用變量來存儲變量名（老套娃了，哈哈）
@a : "b";
@b : #ff0000;
.one {
background-color:@@a;
}
//編譯后
.one {
background-color:#ff0000;
}
這樣子看是不是很有趣多了。
下面講述變量的特性（划起來，要考的）
變量是延遲加載的，無需提前聲明
怎么理解呢，通過例子來最好理解了
@my-width : 100px;
@a : 10px;
.one {
width:@a;
}
.one {
width:@a;
}
@my-width : 100px;
@a : 10px;
上邊兩種寫法都是可以通過，都能讀取到變量的值
接着第二個是，有關於變量的作用范圍，emm，就是在哪個括號就包括在哪里
.one {
width:@my-width;
@a:10px;
}
.two {
width:@a;//這里這里，找不到a變量
}
@my-width : 100px;
了解了變量的作用范圍后，我們來看下一個，若變量在內外都定義了呢
@my-width : 100px;
.one {
width:@my-width;
@my-width:10px;
}
//編譯后
.one {
width:10px;
}
less會從內到外去尋找變量，若里面找的到，那么就不考慮外邊了，若里面沒有，則向外找，有就替換，沒有，那就繼續往外，直至找不到
附上下一篇：less的嵌套規則
關於less的變量介紹就這么多了，本文是個人在學習中的筆記整理，那么是從哪里學的，當然是看文檔，哈哈