环境检测
image.png
检测node.js， node -v
检测 npm（node package manager） ， npm -v
image.png
检测 Less， lessc -v
注释
/注释/ 在Less中，这种格式的注释能被编译， // 这种不能；
/*注释*/
编译结果：也是 /注释/
截图对比：左边是less环境，右边是编译后的css
image.png
变量
@变量名:值;
@baseColor:#e92322;
a{
color:@baseColor;
}
定义一个基本颜色变量，在 a 标签中引入;
看编译结果：
a {
color: #e92322;
}
截图对比：左边是less环境，右边是编译后的css
image.png
混入
可以将一个定好的样式，引入到另一个样式中，类似于函数的调用;
先定义一个基本样式，设置样式参数，并设置默认值
/* 定义一个类似函数的样式，@r 是圆角变量，:10px 是默认值*/
.addRadius(@r:10px){
border-radius:@r;
-webkit-border-radius:@r;
-moz-border-radius:@r;
}
.mydiv{
width: 100px;
height: 100px;
/*引入写好的样式，并传入参数*/
.addRadius();
}
编译结果：
.mydiv {
width: 100px;
height: 100px;
/*引入写好的样式，并传入参数，不使用参数的话，使用默认值 10px*/
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
截图对比：
image.png
嵌套
实现选择器继承，可以减少代码量，同时使用代码结构更清晰
传统写法：
.my-header{}
.my-header > div{}
.my-header > div > h3{}
.my-header > div > h3::before{}
.my-header > div > h3 > a{}
.my-header > div > h3 > a:hover{}
Less 嵌套写法：
.my-header{
width: 200px;
height: 36px;
.addRadius();
> div{
width: 100%;
> h3 {
height: 20px;
&::before{
content: "";
display: table;
}
> a{
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
}
}
}
编译结果：
.my-header {
width: 200px;
height: 36px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.my-header > div {
width: 100%;
}
.my-header > div > h3 {
height: 20px;
}
.my-header > div > h3::before {
content: "";
display: table;
}
.my-header > div > h3 > a {
text-decoration: none;
}
.my-header > div > h3 > a:hover {
text-decoration: underline;
}
截图对比：
image.png
