less学习笔记2-语言特性（变量）

码完第一篇后才发现文本编辑器可以改成Markdown，试了下Markdown，才发现上一篇的排版真的好糟糕。本人也会努力将less官网的内容翻成中文，并且尽可能的讲清楚。希望能给想学less的前端新人带来一点收获吧，也能增强我自己的学习效果。以后可能会较频繁的对文章进行修改，努力写得更加浅显易懂。

---

概述

在你的样式表中一个值被重复使用多次的情况很常见：

.link{
    color: #ff4e56;
}
.widget{
    color: #fff;
    background-color: #ff4e56;
}

变量可以使你的代码更容易维护，通过一个值来控制所有相同的值。

@color: #ff4e56;
.link{
    color: @color;
}
.widget{
    color: #fff;
    background-color: @color;
}

变量插入

上面的例子实现了在css规则中使用变量来控制值，但是变量也可以使用在其他的地方，比如选择器的名字，属性的名字，URLs和@import 声明中

选择器(v1.4.0)

@selector: banner;
.@{selector}{
    font-size: 16px;
    color: #fff;
    background-color: #ff4e56;
}

编译为：

.banner{
    font-size: 16px;
    color: #fff;
    background-color: #ff4e56;
}

URLs

@imgUrl: ".../image";
.listImg{
    background: url("@{imgUrl}/banner.png");
}

import 声明(v1.4.0)

语法：@import "@{themes}/test.less";
在v2.0.0之前，只有定义声明在根（root）或者当前作用范围内的变量才会被认定为变量，查找变量的时候只有会在当前文件和导入文件中查找。

@url: "../less";
@import "@{url}/test.less";

属性（v1.6.0）

@property: color;
.test{
    @{property}: blue;
    background-@{property}: #333;
}

编译为：

.test{
    color: blue;
    background-color: #333;
}

变量名

可以使用一个变量名去定义另外一个变量

@name: "hello world";
@var: "name";
content: @@var;

编译为：

content: "hello world";

延迟加载（lazy loading）

变量会延迟加载，不一定要在使用之前定义声明

有效的less代码：

.lazy-load{
    width: @var;
}
@var: @a;
@a: 50%;

下面也是有效的代码：

.lazy-load{
    width: @var;
    @a: 50%;
}
@var: @a;
@a: 100%;

上面两部分代码均会编译成：

.lazy-load{
    width: 50%;
}

当一个变量被定义声明了两次，最后一次定义声明的变量将会被使用，查找变量的时候从当前作用范围向上级搜索。这跟css本身最后一次被定义的属性将会被使用很相似。

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

编译为：

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

默认变量

有时候我们需要默认变量--是一种在变量还没定义好之前，定义一个变量。该功能不是必须的，因为可以很轻易的复写一个变量通过在所需的地方进行定义声明。

@base-color: green;

@import "test.less";
@base-color: red;