上篇文章介绍了如何安装Less，我们将所有东西都写在.less里面，最后通过命令将.less转换成.css文件，就可以放入到项目里用了。今天了解一些less常用知识点。
1.变量：声明两个变量，一个是背景颜色，一个是文本颜色
Less代码：
@background-color: #ffffff;
@text-color: #1A237E; p{
background-color: @background-color;
color: @text-color;
padding: 15px;
} ul{
background-color: @background-color;
} li{
color: @text-color;
}
将其编译成css后的代码:
p{
background-color: #ffffff;
color: #1A237E;
padding: 15px;
}
ul{
background-color: #ffffff;
}
li{
color: #1A237E;
}
这就是Less里面的变量用法，用起来非常方便。比如上面想切换那两个颜色只需要将变量值互换一下即可。
2.Mixin :可以将已有的 class 和 id 的样式应用到另一个不同的选择器上。比如看下面例子。
#circle{
background-color: #4CAF50;
border-radius: %;
}
#small-circle{
width: 50px;
height: 50px;
#circle
}
#big-circle{
width: 100px;
height: 100px;
#circle
}
将其编译成css后的代码:
#circle {
background-color: #4CAF50;
border-radius: %;
}
#small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: %;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: %;
}
注意看上面这个.css里面是不是也出现了 #circle的样式，如果你不想让#circle再出现到.css里面那就加一个()即可，例如:
#circle(){
background-color: #4CAF50;
border-radius: %;
}
#small-circle{
width: 50px;
height: 50px;
#circle
}
#big-circle{
width: 100px;
height: 100px;
#circle
}
将其编译成css后的代码:
#small-circle {
width: 50px;
height: 50px;
background-color: #4CAF50;
border-radius: %;
}
#big-circle {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: %;
}
另外Mixin还可以传参，比如传入一个指定宽高的参数，默认是30。创建一个 30×30的小圆和一个 200×200 的大圆
#circle(@size: 30px){
background-color: #4CAF50;
border-radius: %;
width: @size;
height: @size;
}
#small-circle{
#circle
}
#big-circle{
#circle(200px)
}
将其编译成css后的代码:
#small-circle {
background-color: #4CAF50;
border-radius: %;
width: 30px;
height: 30px;
}
#big-circle {
background-color: #4CAF50;
border-radius: %;
width: 200px;
height: 200px;
}
3.嵌套：可以和html相匹配的方式构造.Less样式表，例如:
ul{
background-color: #03A9F4;
padding: 10px;
list-style: none;
li{
background-color: #fff;
border-radius: 3px;
margin: 10px ;
}
}
将其编译成css后的代码:
ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
background-color: #fff;
border-radius: 3px;
margin: 10px ;
}
就像在其它高级语言中一样， Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明， less 会一直往上查找，直至找到离它最近的声明。例如:
@text-color: #;
ul{
@text-color: #fff;
background-color: #03A9F4;
padding: 10px;
list-style: none;
li{
color: @text-color;
border-radius: 3px;
margin: 10px ;
}
}
将其编译成css后的代码:
ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
color: #ffffff;
border-radius: 3px;
margin: 10px ;
}
4.运算:和+ - * /一样 可以操作任何数字类型变量。例如：两个紧邻的 div 标签，第二个标签是第一个标签的两倍宽并且拥有不同的背景色。
@div-width: 100px;
@color: #03A9F4; div{
height: 50px;
display: inline-block;
} #left{
width: @div-width;
background-color: @color - ;
} #right{
width: @div-width * ;
background-color: @color;
}
将其编译成css后的代码:
div {
height: 50px;
display: inline-block;
}
#left {
width: 100px;
background-color: #;
}
#right {
width: 200px;
background-color: #03a9f4;
}
5.函数: 看一下 fadeout， 一个降低颜色透明度的函数
@var: #;
div{
height: 50px;
width: 50px;
background-color: @var;
&:hover{
background-color: fadeout(@var, %)
}
}
将其编译成css后的代码:
div {
height: 50px;
width: 50px;
background-color: #;
}
div:hover {
background-color: rgba(, , , 0.5);
}
当鼠标放在div上时，降低透明度0.5
想学习更多Less知识，推荐：https://www.w3cschool.cn/less/importing.html
原文来自:https://www.jianshu.com/p/c676041f387e.