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. }