Less 变量

上篇文章介绍了什么是 less。根据上篇文章的介绍，了解到 less 只是一种 css 预编译器，它需要通过编译软件对它进行编译之后生成需要的 css，文件。本文介绍如何正确的使用 less。

考拉

首先来讲 less 编译工具：考拉。

考拉是国人开发的一个全平台的 less 的编译软件编译工具，它的网址是 http://koala-app.com/。

学习变量它nice的变量这样一个概念。那么这节课主要有这么5个知识点，大家需要。

在 less 中，使用 @ 来定义变量：

less 复制代码

@blue: #5B83AD;

#header {
    color: @blue;
}

这里需要注意一下，所谓的变量实际上只是字符串层面的替换而已，所以其实是常量。

在选择器和属性名中使用变量和将变量作为值不同；这种情况下需要用到@{}的格式。

less 复制代码

@mySelector: width;
.@{mySelector} {
    @{mySelector}: 960px;
    height: 500px;
}

上述 less 代码在编译之后等价于：

css 复制代码

.width {
    width: 960px;
    height: 500px;
}

一般来说，在 css 中， URL 基本上都是以下面的这种方式使用的：

css 复制代码

body {
    background-image: url("http://example.com/images/1");
}

而在 less 中，可以使用变量替换 http://example.com 这部分，如下所示：

less 复制代码

@baseURL: http://example.com;
body {
    background-image: url("@{baseURL}/images/1");
}

所谓延迟加载，你可以将其等效成 js 中函数的提升，也就是说：无论变量定义在哪里，在编译的时候总是会提升到作用域的最上方，因此下面两种写法是等效的：

less 复制代码

@a: 9%;
@var: @a;

.lazy {
    width: @var;
}

等效于：

less 复制代码

.lazy {
    width: @var;
}

@var: @a;
@a: 9%;

如果在同一个定义域定义了相同的 less 变量，那么通过提升作用可以知道，后定义的会覆盖先定义的值。而在不同定义域下定义的同名变量，采用的是就近原则生效。

less 复制代码

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

经过提升之后最内侧的 @var: 3;覆盖了@var: 2;的值；最终结果为：

css 复制代码

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