Less 概述
Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。
Less 作为 CSS 的一种形式扩展,并没有减少 CSS 的功能,而是在现有的 CSS 语法上,添加了程序式语言的特性。
来看下面这段 Less 代码:
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
实际上它等价于 CSS 代码:
#header {
width: 10px;
height: 20px;
}
这就是 Less 中变量的应用,除此之外,Less 中还引入了混合(Mixin)、嵌套、运算、函数等功能,简化了 CSS 的编写,为样式编写提供了巨大便利。
Less 编译
在本质上,Less 包含一套自定义的语法以及一个解析器,用户根据这些语法去定义自己的样式规则。
这些规则最终会通过解析器,编译生成对应的 CSS 文件。
那么,如何进行解析呢,这需要利用 VS code 中插件 >> Easy Less 。
![](https://i-blog.csdnimg.cn/blog_migrate/7cd95d5f10a5c222cb4f685b8b0a2ae2.png)
此后,每次保存 .less 文件后,就会自动生成对应的 .css 文件。当用到该样式时,直接在 .html 引入对应生成的 .css 文件即可。
了解编译原理和如何引入后,下面来介绍 Less 语法。
Less 变量
在设置样式时如果不想给定固定值,则可使用变量来替代。
@变量名: 值;
命名变量也是要有规范的,如下
- 必须以 @ 开头
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
@color: tomato;
@font20: 20px;
.box h1{
background-color: @color;
font-size: @font20;
}
Less 嵌套
对于下面这段 CSS 代码:
.box {
width: 200px;
}
.box .son {
color: tomato;
}
.box .son a {
font-size: 15px;
}
我们可以利用 Less 来这样编写:
.box {
width: 200px;
.son {
color: tomato;
a {
font-size: 15px;
}
}
}
这就有点像 HTML 结构了,层层嵌套,减少代码量的同时也使样式代码更具逻辑性。
此外,当遇到(交集|伪类|伪元素)选择器时,需要在内层选择器前加 &
。
a {
font-size: 15px;
&:hover {
color: orange;
}
}
或者是这样:
.nav {
.logo{
width: 100px;
}
&::before {
content: '';
}
}
否则,:hover
和 ::before
则会被当做后代选择器来看待:(注意a
和 :hover
之间有空格)
.box .son a :hover {
color: orange;
}
Less 运算
算术运算符 +、-、*、/
可以对任何数字、颜色或变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。
.box {
width: 200px * 2;
height: 200px - 100;
}
转换为 CSS
.box {
width: 400px;
height: 100px;
}
注意,在使用 /
运算时,需要加 ()
才能正常运算:
.box {
width: (100px / 2);
height: 100px / 2;
}
.box {
width: 50px;
height: 100px / 2;
}
此外,关于单位,有几点注意事项:
- 如果运算数中只有一个单位,以该单位为准
- 如果有多个单位,则以最左侧单位为准
Less 混合
在 Less 编写样式时,可以直接将其他类的样式整体引入。
.shape {
width: 100px;
height: 100px;
}
.box {
color: tomato;
.shape();
}
转为 CSS 代码
.shape {
width: 100px;
height: 100px;
}
.box {
color: tomato;
width: 100px;
height: 100px;
}
Less 函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
例如,下面是逻辑函数 if()
和数学函数 sqrt()
的应用:
div {
margin: if(2 > 1, 0, 3px);
padding: sqrt(25cm);
}
转为 CSS 代码
div {
margin: 0;
padding: 5cm;
}
Less 内置函数较多,具体可参见 >> Less 函数手册