Less的强大变量用法

less中的变量应用十分强大，可以灵活的应用到各种不同需求的场景。

一，属性值变量

声明： sass声明变量是用$符号，而less声明变量是用@符号

作用域 ：也区分为全局变量和局部变量，如果引用的变量有定义局部变量，则优先取局部变量。这里没有闭包的概念！

例如：

@wd: 12px;
@bgColor: #ff005a;

.container {
    width: @wd;
    background-color: @bgColor; // 就近取局部变量#FFF
    @bgColor: #FFF; // 局部变量
}

二，属性名变量

声明：与属性值变量一致，使用@变量名。属性名定义变量可以大大减少代码量

引用 ：@{变量名} - 需要用大括号包裹

示例：

// 定义属性名变量
@bdCol: background-color;

.main {
    @{bdCol}: #FFF; // 引用
}

// 编译后
.main {
    background-color: #FFF;
}

三，选择器变量

声明：声明方式与值变量类似，主要作用是让选择器变成动态

引用 ：@{变量名}

示例：

// 定义选择器变量
@outDiv: #warp; // 变量直接定义id选择器
@innerDiv: main; // 变量定义选择器的名称

// 引用
@{outDiv} {
    width: 100%;
    margin: 20px;
}

.@{innerDiv} { // 引用选择器变量名称，并定义class选择器
    color: #fff;
}
#@{outDiv} {
    color: #333;
}

// 编译后
#warp {
    width: 100%;
    margin: 20px;
}

.main {
    color: #fff;
}

#warp {
    color: #333;
}

四，url变量

声明 ：与普通值变量用法一致，但变量值要加引号。为图片等资源文件的url定义变量。

引用 ：@{变量名}

示例：

// 定义url变量
@logo: "../assects/img";

.img {
    background: url("@{logo}/logo.png"); // 引用，通过大括号、字符串拼接
}

// 编译后
.img {
    background: url("../assects/img/logo.png");
}

五，同时声明变量名和变量值

声明 ：@变量名: {属性名：属性值}。看上去像是封装一组声明好的变量和值，类似于mixin。

引用 ：@变量名() - 后面加小括号

示例：

// 定义样式属性名和属性值的变量
@bgWhite: {background: #FFF;}
// 引用
.main {
    @bgWhite();
}
// 编译后
.main {
    background: #FFF;
}

// 定义一组样式的变量
@Rules {
    color: red;
    font-size: 12px;
}
// 引用
.container {
    @Rules();
}
// 编译后
.container {
    color: red;
    font-size: 12px;
}

六，变量运算

说明：less的变量支持简单的加减乘除算术运算。

使用方式：

加减运算以第一个值的单位为基准

乘除运算单位必须统一

示例：

@wd: 100px;
@color: #112233;

// 计算应用
.main {
    width: @wd + 20; // 120px
    .header {
        width: @wd - 10px * 2; // 80px
        font-size: 14px;
        color: @color*2; // #224466
    }
}

七，动态变量-用变量定义变量

说明：即动态定义要引用的变量名称

引用：还是通过@符号，但是引用变量的变量，需要两个@。

示例：

@wd: 100px;
@labelWd: "wd"; // 定义labelWd变量需要引用的变量名为wd

// 引用
.title {
    width: @@labelWd; // 即@wd > 100px;
}