less的三种基础用法
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
本文主要介绍less文件如何转化为css文件。
1.首先，你要确认你的电脑已经安装了vsCode。
2然后，在vsCode里面安装一个easy Less插件。
3创建less文件，保存之后会有一个对应的css文件，最终引入css文件就可以了。
less语法
变量
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译成css是这样的：
#header{
width: 10px;
height: 20px;
}
混合
什么是混合，混合就是比如我们有一个box2的盒子，想用box1盒子的样式，我们不想再重新写一遍，可以看下面代码:
.box1 {
width: 100px;
height: 100px;
background: 'red';
border: 1px solid #f2f2f2
}
.box2{
.box1;
margin: 10px;
}
编译成css是这样的：
.box2{
width: 100px;
height: 100px;
background: red;
border: 1px solid #f2f2f2;
margin: 10px;
}
嵌套
Less 提供了使用嵌套代替了我们类名拼接很长的问题。假设我们有以下 CSS 代码：
.header {
color: black;
}
.header .nav {
font-size: 12px;
}
.header .logo {
width: 300px;
}
在less中我们这样写
.header{
color: black;
.nav{
font-size: 12px;
}
.logo{
width: 300px;
}
}
除了嵌套，还可以在嵌套中使用伪类选择器
p{
display: block;
zoom: 1;
&:after{
content: ' ';
display: block;
font-size: 1px;
height: 10px;
clear: both;
visibility: hidden;
}
}
