变量

对变量的认识

变量定义使用 @ 符，不能以数字开头，不能包含特殊符号，不能使用关键字如：media，区分大小写 @color 和 @Color 是两个变量。

@color: red;
@bg: #000;
@width: 200px;

.my-div {
    width: @width;
    background-color: @bg;
    color: @color;
}

上述代码编译为：

.my-div {
    width: 200px;
    background-color: #000;
    color: red;
}

变量插值

变量也可用于选择器，属性，URL，@import语句。

@my-selector: banner;
@my-elm: color;
@my-url: "../img"
@my-import-src: "../src/less";

// 变量插值用在选择器
.@{my-selector} {
    width: 200px;
    height: 200px;
    // 用在属性上
    @{color}: red;
    // 用在路径上
    background-image: url("@{my-url}/app.jpg");
}

// 用在@import语句上
@import "@{my-import-src}/index.less";

编译为：

.banner {
    width: 200px;
    height: 200px;
    color: red;
    background-image: url("../img/app.jpg");
}

@import "../src/less/index.less";

转义(了解即可)

转义可以将任何字符串做为属性和变量值,~"anything" 或 ~'anything' 中的任何内容都按原样使用，除了插值之外没有任何变化。在我的编译器中使用转义会报错,不知道你们的编译器能不能用!

@my-minwidth: ~"(min-width: 740px)";

// 转义的旧写法
.my-div {
    @media screen and @my-minwidth {
        background: red;
    }
}

// less 3.5开始之后转义的写法
@my-minwidth: (min-width: 740px);

可变变量

你可以使用另一个变量定义变量的名称。

@primary: pink;
@color: primary;

.my-div {
    color: @@color;
}

// 编译为：
.my-div {
    color: pink;
}

变量延迟声明

变量不必在使用前声明, 为了性能方面优化.

// 第一种
.my-div {
    width: @var;
}
@var: @width;
@width: 200px;

// 第二种
.my-div {
    width: @var;
    @width: 200px;
}
@var: @width;
@width: 300px;

都编译为:

.my-div {
    width: 200px;
}

把属性做为变量

你可以使用$prop把属性做为变量, 语法:$属性名; 只能在把自己规则集中的属性做为变量,不能跨规则集;

.my-div {
    width: 200px;
    height: $width;
    color: pink;
    background-color: $color;
}

默认变量

如果有两个变量名相同的变量,后定义的变量会覆盖先定义的变量,从外部导入less文件中也有相同的变量,在导入语句后定义的变量会覆盖前面的变量,在导入语句后面定义的变量会覆盖导入文件中的变量

// library.less
@base-color: pink;

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

.my-div {
    color: @base-color;
}

// 编译为:
.my-div {
    color: red;
}

less变量

变量