前端基础-Less语法

less介绍

LESS 在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，可以层次分明的嵌套书写，并且降低了 CSS 的维护成本。
LESS是比CSS更高一级的语言，它拥有CSS不具备的语法。但他不能被浏览器直接识别，需要预处理工具将LESS文件转化为CSS文件才行。

less使用方式

如图1，在vscode安装less插件后，创建后缀名为less的文件，保存后自动生成后缀名为.css的文件

less基础语法

1.变量(Variables)
less用@来声明变量，变量允许我们定义一系列通用样式，可以在需要的时候调用。
语法：@变量名：值

@color:skyblue;
#box {
color:@color
}
p {
color:@color
}

2.混合
混合可以将定义好的classA引入到另一个classB中，并且可以继承classA的所有属性
语法：

.borderd{
border-top:2px;
}
#main a {
color:white;
.borderd();
}

生成样式：

.bordered{
border-top:2px;
}
#main a {
color:white;
border-top;2px;
}

3.嵌套
在一个选择器嵌套另一个选择器实现继承
语法：

#header {
color:red;
.box{
	weight:70px;
}
.logo {
font-size:12px;
}

生成样式是：

# header{
color:red
}
#header .box{
weight:70px;
}
#header .logo{
font-size:12px;
}

4.运算
less运算提供了加减乘除操作，可以做属性值和颜色的运算，可以实现属性值之间的复杂关系。

@w:200px;
@h:100px;
@bw:3px;
@mg:5px;
@pd:5+5px;
@c:#111111;
@fz:2+5px-1em;
.box {
width:@w+100px;
height:@h+100px;
border:(@bw+2em) solid orange;
margin:@mg*2px;
padding:@pd/2;
background:@c+#222222;
font-size:@fz;
}

生成样式是：

.box {
width:300px;
height:200px;
border:5px solid orange;
margin:10px;
padding:10px/2;
background:#333333;
font-size:6px;
}

5.注释
除css注释外，less还支持//注释

//* {
 //padding:0;
//margin:0;
//}