Less變量

Less變量

定義變量

Less 中的變量和其餘編程語言同樣，能夠實現值的複用，一樣它也有做用域（scope）。簡單的講，變量做用域就是局部變量和全局變量的概念。

Less 中，變量做用域採用的是就近原則，換句話說，就是先查找本身有沒有這個變量，若是有，就取本身的變量，若是沒有，就查找父元素，依此類推。先看一個簡單的例子，Less 文件以下：

1. @width : 20px;
2.  #homeDiv  {
3.    @width : 30px;
4.    #centerDiv  {
5.        width : @width;  // 此處應該取最近定義的變量 width 的值 30px
6.    }
7.  }
8.  #leftDiv {
9.      width : @width;  // 此處應該取最上面定義的變量 width 的值 20px
10. }

編譯後的CSS代碼爲：

1. #homeDiv #centerDiv {
2.     width: 30px;
3. }
4. #leftDiv {
5.     width: 20px;
6. }

對於程序開發人員來講，變量應該是最熟悉不過的概念了。若是屢次重複使用一個信息，將它設置爲一個變量，就能夠在代碼中重複引用。這不只避免重複定義，還能使代碼更容易維護。

Less中，變量由變量名稱和值組成。變量名以 @ 爲前綴，由字母、數字、_和-組成，變量名稱和值之間用冒號隔開。如：

1. /* 定義變量 */
2. @color: #4d926f;
3. /* 應用到元素中 */
4. header {
5.   color: @color;
6. }
7. h2 {
8.   color: @color;
9. }

上面的代碼定義了一個變量 @color，並給它賦值爲 #4d926f。而後，就能夠在選擇器 header 和 h2 中反覆使用它，而沒必要重複定義。編譯後的CSS代碼爲：

1. header {
2.   color: #4d926f;
3. }
4. h2 {
5.   color: #4d926f;
6. }

從上面的代碼能夠看出，變量是 VALUE（值）級別的複用，能夠將相同的值定義成變量，來統一管理起來。當須要調整樣式時，只須要修改相應變量的值就能夠了，很是方便。所以，變量適用於定義主題，能夠將背景顏色、字體顏色、邊框屬性等常規樣式進行統必定義，不一樣的主題只須要定義不一樣的變量文件就能夠了。

固然，變量也一樣適用於 CSS RESET（重置樣式表），在 Web 開發中，每每須要屏蔽瀏覽器的默認樣式，就可使用 Less的變量特性。這樣，就能夠在不一樣項目間重用樣式表，咱們僅僅須要在不一樣的項目樣式表中，根據需求從新給變量賦值便可。

不只能夠直接在屬性值中使用變量，還能夠用相似 @{name} 的結構，以「插值」的方式在選擇器名、屬性名、URL、import、媒體查詢中使用變量。在編譯時，變量將被替換爲它們相應的值。

變量插值

1）選擇器名插值

Less選擇器名稱中能夠引用任何變量。如：

1. @head: h;
2. .@{head}2 {
3.   font-size: 16px;
4. }

編譯後的CSS代碼爲：

1. .h2 {
2.   font-size: 16px;
3. }

2）屬性名插值

Less屬性名稱中能夠引用任何變量。如：

1. @my-property: color;
2. .myclass {
3.   background-@{my-property}: #81F7D8;
4. }

編譯後的CSS代碼爲：

1. .myclass {
2.   background-color: #81F7D8;
3. }

3）URL插值

變量還能夠用來保存URL，並在 url() 中使用它。如：

1. @host: "http://www.waibo.wang/";
2. h2 {
3.   color: @color;
4.   background: url("@{host}img/bg.png");
5. }

編譯後的CSS代碼爲：

1. h2 {
2.   color: #f00;
3.   background: url("http://www.waibo.wang/img/bg.png");
4. }

4）import插值

import語句中，可使用保存路徑的變量。如：

1. @host: "http://www.waibo.wang/";
2. @import "@{host}/reset.less";

5）媒體查詢插值

若是你但願在media query中使用Less變量，你能夠直接使用普通的變量方式。由於「~」後面的值是不被編譯的，因此能夠用做media query的參數。如：

1. @singleQuery: ~"(max-width: 480px)";
2. @media screen, @singleQuery { 
3.     div { 
4.     width:2000px; 
5.     } 
6. } 

編譯後的CSS代碼爲：

1. @media screen, (max-width: 480px) {
2.   div {
3.     width: 2000px;
4.   }
5. } 

變量的做用域

 

Less 中的變量和其餘編程語言同樣，能夠實現值的複用，一樣它也有做用域（scope）。簡單的講，變量做用域就是局部變量和全局變量的概念。

Less 中，變量做用域採用的是就近原則，換句話說，就是先查找本身有沒有這個變量，若是有，就取本身的變量，若是沒有，就查找父元素，依此類推。先看一個簡單的例子，Less 文件以下：

1. @width : 20px;
2.  #homeDiv  {
3.    @width : 30px;
4.    #centerDiv  {
5.        width : @width;  // 此處應該取最近定義的變量 width 的值 30px
6.    }
7.  }
8.  #leftDiv {
9.      width : @width;  // 此處應該取最上面定義的變量 width 的值 20px
10. }

編譯後的CSS代碼爲：

1. #homeDiv #centerDiv {
2.     width: 30px;
3. }
4. #leftDiv {
5.     width: 20px;
6. }