less變量

什么是less 

Less是一個Css預編譯器，意思是指它可以擴展Css語言，添加功能如允許變量（variables），混合（mixins），函數（functions）和許多其他技術，讓你的Css更具維護性、主題性、擴展性。例如PHP就不能直接和css定義變量，而通過學習less就可以進行編寫。使用less來維護css是非常方便的。

LESS的下載

Less可以到官網去進行下載，網頁有中文版(http://www.lesscss.net)和英文版(http://www.lesscss.org)。

LESS中的注釋

Less中有兩種注釋形式：

//  以//開始的注釋，不會被編譯到css文件中去。

/**/  以/**/包裹的注釋會被編譯在css的文件中。

如何使用less

Less文件只有在被編譯后才能被瀏覽器識別使用。

less變量

普通的變量

Css默認不支持變量，當我們使用less之后就可以使用。

其定義方式是 @變量名:值 ，如下，我們定義一個變量green,設置一個顏色green,然后將網頁背景設置為綠色：

@green: #801f77;
header {
  background: @green;
}

注意：由於變量只能定義一次，實際上他們就是“常量”

作為選擇器和屬性名

使用時將變量以@{變量名}的方式使用，使用例子如下：

作為選擇器和屬性名的變量

@kuandu:width;
.@{kuandu}{
  @{kuandu}:150px
}

注意：這里的變量即使選擇器又是屬性名，不能寫錯。

作為URL

使用時，使用””將變量的值括起來，使用時同樣將變量以@{變量名}的方式使用。使用例子如下：

//作為URL的變量

@imgurl:"https://www.baidu.com/img/";
header{
  background: @green url("@{imgurl}bdlogo.png");
  height: 500px;
}

延遲加載

延遲加載：變量是延遲加載的，在使用前不一定要預先說明。

意思是指：在前面使用了這個變量，但沒有定義，但可以在后面給他定義出來，不影響輸出。

定義多個相同名稱的變量時

在定義一個變量兩次時，只會使用最后定義的變量，Less會從當前作用域向上搜索。這個行為類似於css的定義中始終使用最后定義的屬性值。使用實例如下：

//定義多個相同名稱的變量時

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