less笔记-变量

一、less变量的直观优点

比较下面CSS 写法与 less写法：

css：

a,
.link {
  	color: #428bca;
}
.widget {
  	color: #fff;
  	background: #428bca;
}

less：

// Variables
@link-color: #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  	color: @link-color;
}
a:hover {
  	color: @link-color-hover;
}
.widget {
  	color: #fff;
  	background: @link-color;
}

从上面可看出，虽然less多了个变量的定义，但其定义的位置是确定的，便于修改维护（maintain），尤其在需要的样式值使用地方较多时。而css 若要修改某个样式，则只能在每个出现的地方逐一修改。

二、less变量的其它用法

less变量除了可用于属性值外，还能用于selector name、property name、url、@import statement。（基础版本1.60）

1、用于selector name：

@mySelector: banner;

// Usage
.@{mySelector} {
  	font-weight: bold;
  	line-height: 40px;
  	margin: 0 auto;
}

编译后为：

.banner {
  	font-weight: bold;
 	line-height: 40px;
  	margin: 0 auto;
}

2、用于property name：

@property: color;

.widget {
 <span style="white-space:pre">	</span>@{property}: #0ee;
  <span style="white-space:pre">	</span>background-@{property}: #999;
}

编译后：

@{property}代替为color。

3、用于URL

// Variables
@images: "../img";

// Usage
body {
  	color: #444;
  	background: url("@{images}/white-sand.png");
}

编译为：

body {
  	color: #444;
  	background: url("../image/white-sand.png");
}

4、用于@import语句

同理。

共同点：变量用于此四种情况下，引用时格式均为：@{变量名}。

三、变量的lazy loading

@var: 0;
.class {
  	 @var: 1;
  	 .brass {
    		@var: 2;
   		three: @var;
   		@var: 3;
  	}
  	one: @var;
}

lazy loading的含义在于变量的定义位置不必要在其使用位置之前，但其使用范围仍然满足内层优先的原则，且同级定义的相同变量，后一个生效（即将会前一个覆盖）。

上面的代码编译后为：

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

one值为1，因为该处仅有可能访问到值为0和1的变量var，值为1的优先。three为3，因为此处可能访问到所有定义的变量var，值为2与3的var优先级较高，且值为3的var后定义，覆盖了值为2的var，最终使用的var值即为3。

四、默认值

使用变量后定义的覆盖先定义的及lazy loading特性，可在变量未定义（位置上）之前使用某个变量。

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;

编译后，dark-color为红黑，而非绿黑。表达的含义即，即使将@base-color：green去掉，变量dark-color也能引用到此位置之前还未定义的base-color变量。

笔记参考：http://www.runoob.com/manual/lessguide/features/#variables-feature-variable-interpolation