最近在學習了less，作些筆記；
本質上，LESS 包含一套自定義的語法及一個解析器，使用者根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 CSS 檔案。LESS 並沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，為 CSS 加入程式式語言的特性。你也可以再less檔案中寫按照css規則寫樣式。less檔案是以less作為檔案字尾名，HTML引用時可以像css那樣引用，如下：

<link rel="stylesheet/less" type="text/css" href="styles.less">

在渲染HTML頁面時，less檔案需要編譯成css檔案。我們可以有很多種方法。在伺服器端，如Node.js，我們有專門的less編譯模組。如果是在客戶端，需要從LESS官網下載less.js檔案，然後在HTML頁面中引入，如下：

<script src="less.js" type="text/javascript"></script>

注意：
（1）確保包涵.less樣式表在less.js指令碼之前。
（2）當你引入多個.less樣式表時，它們都是獨立編譯的。所以，在每個檔案中定義的變數、混合、名稱空間都不會被其它的檔案共享。
（3）必須通過伺服器環境訪問頁面，否則報錯。

變數

一、定義變數

//定義變數  
@gray:#555;
@orange:orange;

header{
    background: @gray;
    text-align: center;
 

    height: 100px;
    line-height: 100px;
}

編譯後的css:

header{
  background: #555555;
  text-align: center;
  height: 100px;
  line-height: 100px;
}

二、作為選擇器和屬性名的變數
注意：使用時將變數以@{變數名}的方式使用

@gao: height;

.@{gao}{
    @{gao}:300px;
}

編譯後的css:

.height {
  height: 300px;
}

三、作為URL的變數

@imgurl:"https://www.baidu.com/img/"
 
;
header{
    background:url("@{imgurl}bdlogo.png") no-repeat;
    height: 500px;
    border: 1px solid #333;
    background-size: 150px 150px;
}

編譯後的css:

header {
  background: url("https://www.baidu.com/img/bdlogo.png") no-repeat;
  height: 500px;
  border: 1px solid #333;
  background-size: 150px 150px;
}

四、定義多個相同名稱的變數時
在定義一個變數兩次或者多次時，只會使用當前作用域最後定義的變數，Less會從當前作用域向上搜尋。這個行為類似於css的定義中始終使用最後定義的屬性值。

@var: 0;

.class{
  @var: 1;
    .brass {
      @var: 2;
      three: @var;  //這是的值是3
      @var: 3;
    }
  one: @var;  //這是的值是1
}

編譯後的css:

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

五、延遲載入
延遲載入：變數是延遲載入的，在使用前不一定要預先說明。
意思是指：在前面使用了這個變數，但沒有定義，但可以在後面給他定義出來，不影響輸出。

@color: #333;

div{
    width: 100px; height: 200px;
    font-size: @size;
    color: @color;
}

@size: 20px;

編譯後的css:

div {
  width: 100px;
  height: 200px;
  font-size: 20px;
  color: #333333;
}

混合

一、基本混合

@orange: orange;

.base{
    font-size: 30px;
    color: @orange;
}

h1{
    border: 1px solid red;
    .base;
}

編譯後的css:

.base {
  font-size: 30px;
  color: #ffa500;
}
h1 {
  border: 1px solid red;
  font-size: 30px;
  color: #ffa500;
}

二、不帶輸出的混合，類名後面使用();(原來模板不出現)

@pink: pink;

.base2(){
    border: 1px solid blue;
    background: @pink;
}
footer{
    .base2;
}

編譯後的css:

footer {
  border: 1px solid blue;
  background: #ffc0cb;
}

三、帶選擇器的混合

.hoverMix(){
    &:hover{
        border: 1px solid green;
    }
}

button{
    .hoverMix;
}

編譯後的css:

button:hover {
  border: 1px solid green;
}

四、帶引數的混合

@gray: #555;
.border( @color ){
    border: 1px solid @color;
}

h1{
    .border( @gray );
}

編譯後的css:

h1 {
  border: 1px solid #555555;
}

五、帶引數並且有預設值的混合
像這樣給引數設定預設值。有了預設值，我們可以不用設定屬性值也能被呼叫。

.border2( @color:red ){
    border: 1px solid @color;
}

h2{
    .border2();
}
h3{
    .border2( @pink );
}

編譯後的css:

h2 {
  border: 1px solid #ff0000;
}
h3 {
  border: 1px solid #ffc0cb;
}

六、帶多個引數的混合
如果傳參的括號裡全部都是以”，”分隔，那麼會依次傳給各個引數的值；如果傳參的括號裡既有”,”又有”;”那麼會把”;”前面當作一個整體，傳給一個值；

.mixin(@color;@padding:10;@margin:2){
    color: @color;
    padding: @padding;
    margin: @margin, @margin, @margin, @margin;
}
div{
    .mixin(@pink);
}
.div{
    .mixin(@orange;10,10,14,14;3);
}

編譯後的css:

div {
  color: #ffc0cb;
  padding: 10;
  margin: 2, 2, 2, 2;
}
.div {
  color: #ffa500;
  padding: 10, 10, 14, 14;
  margin: 3, 3, 3, 3;
}

七、定義多個具有相同名稱和引數數量不同的混合

.mixin2(@color) {
  color-1: @color;
}
.mixin2(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin2(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin2(#008000);
}

編譯後的css:

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

從編譯的結果可以看出，less也有函式過載的特性。當我們定義相同混合屬性名，引數不同，然後.mixin(#008000);呼叫，第一和第二混合都能匹配，但是第三個缺少引數@padding的值，所以不會引用第三個混合屬性。
八、命名引數
引用mixin時可以通過引數名稱而不是引數的位置來為mixin提供引數值。任何引數都以用過它的名稱來使用，這樣就不必按照任意特定的順序來使用引數；

.mixin3(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin3(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin3(#efca44; @padding: 40px);
}

編譯後的css:

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

九、@arguments變數
@arguments代表所有的可變引數。
注意事項：
1. @arguments代表所有可變引數，引數的先後順序就是你的（）括號內的引數的先後順序。
2. 在使用的賦值，值的位置和個數也是一一對應的，只有一個值，把值賦值給第一個，兩個值，賦值給第一個和第二個，三個值賦值給第三個……以此類推，但是需要注意的是假如我想給第一個和第三個賦值，你不能寫（值1，，值3），必須把原來的預設值寫上去！

.border3(@x:solid,@c:red){
  border: 21px @arguments;
}
.div1{
  .border3(dashed);
}

編譯後的css:

.div1 {
  border: 21px dashed #ff0000;
}

十、匹配模式
傳值的時候定義一個字元，在使用的時候使用哪個字元，就呼叫那條規則。

.border4(all,@w: 5px){
  border-radius: @w;
}
.border4(t_l,@w:5px){
  border-top-left-radius: @w;
}
.border4(t_r,@w:5px){
  border-top-right-radius: @w;
}
.border4(b-l,@w:5px){
  border-bottom-left-radius: @w;
}
.border4(b-r,@w:5px){
  border-bottom-right-radius: @w;
}

footer{
  .border4(t_l,10px);
  .border4(b-r,10px);
  background: #33acfe;
}

編譯後的css:

footer {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #33acfe;
}

十一、混合的返回值
在使用混合時，有時會用到一些運算，這時就有返回值。

.average(@x, @y) {
  @average: ((@x + @y) / 2);
  @he:(@x + @y);
}

footer{
  .average(16px, 50px);
  padding: @average;
  margin: @he;
}

編譯後的css:

footer {
  padding: 33px;
  margin: 66px;
}

十二、關鍵字!important
在使用混合屬性後面加上!important關鍵字，則混合中的所有屬性都會加上關鍵字!important。

.fool(@bg:#333;@color: orange){
    background: @bg;
    color: @color;
}

.unimportant{
    .fool;
}
.important{
    .fool !important;
}

編譯後的css:

.unimportant {
  background: #333333;
  color: #ffa500;
}
.important {
  background: #333333 !important;
  color: #ffa500 !important;
}