Less从0开始：变量

蓝德锦
213 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

在Less中，提供了定义变量的能力，通过@符号可以声明变量。

一、变量储存一个CSS值

定义变量和使用变量都直接使用@符号。

@boxHeight: 100px;
@boxWidth: 100px;
@box1Bg: #000;
@box2Bg: red; //在样式中引用变量 

#box1{ 
    width: @boxWidth;
    height: @boxHeight; 
    background: @box1Bg; 
}

#box2{ 
    width: @boxWidth; 
    height: @boxHeight;
    background: @box2Bg; 
}

二、变量存储一个CSS选择器

通过@可以声明一个CSS的选择器，这个选择器可以包含符号（. # > 等），可以不包含符号，或者可以是一小截字符串。

把变量当做CSS选择器时，需要通过 @{变量名} 的方式调用。

1、包含符号

@b: .box; 
@{b}{
    width: 100px;
    height: 100px;
}

2、不包含符号

@b: box;

#@{b}{
    width: 100px;
    height: 100px;
}

3、字符串片段

@b: iv;

#d@{b} { 
    width: 100px;
    height: 100px;
}

4、多个变量组合

@r: red;
@b: Box;

#@{r}@{b} {
    width: 100px;
    height: 100px;
}

转换得到的结果

#redBox { width: 100px; height: 100px; }

注意注意：变量作为属性名可以这样用，但这种方式不能用在属性值上，如

@a: r;
@b: ed; 

.box { color: @a@b; }

上面的写法不会报错，但是不是我们想要得到的red，而是得到 re d ，是的，中间有个空格，破坏了属性名。

除非你使用多属性值的CSS样式，比如border，因为它们每个值之间是用空格分开的。

@w: 1px;
@t: solid;
@c: red; 

#box { border: @w@t@c; } 
#box { border: @w @t @c; } //两种写法都没有问题

如果你希望去除属性值中变量间的空格，可以这样实现：

#box { padding: ~"@{i}px"; }

三、在CSS引号中同样可以使用变量

@images: "../img"; //需要加引号 

body { background: url("@{images}/dog.png"); }

四、变量储存CSS代码

定义的时候，使用{} 把内容包裹起来。

引用的时候，类似调用方法，@all();

@all:{ 
    height: 300px;
    width: 100px;
    background: darkblue; 
}; 

#box1{ @all(); }

经过上面的学习，我们发现，其实变量可以在Less文件中的任意处使用，只是调用的方式不同，作为属性名或属性值中引号内的字符串使用时，需要使用@{ 变量名 } 的方式，而作为属性值，直接 @变量名即可。

五、变量的延迟加载

变量在同一作用域下可以先使用再声明，类似Js的变量提升。

p{ color: @r; }

@r:red;
avatar
文章
阅读
粉丝