Less常用知识点

上篇文章介绍了如何安装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: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

将其编译成css后的代码:

#circle {
    background-color: #4CAF50;
    border-radius: 100%;
}
#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

注意看上面这个.css里面是不是也出现了 #circle的样式，如果你不想让#circle再出现到.css里面那就加一个()即可，例如:

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#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: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

另外Mixin还可以传参，比如传入一个指定宽高的参数，默认是30。创建一个 30×30的小圆和一个 200×200 的大圆

#circle(@size: 30px){
    background-color: #4CAF50;
    border-radius: 100%;

    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(200px)
}

将其编译成css后的代码:

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 30px;
    height: 30px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    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 0;
    }
}

将其编译成css后的代码:

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
}

就像在其它高级语言中一样， Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明， less 会一直往上查找，直至找到离它最近的声明。例如:

@text-color: #000000;

ul{
    @text-color: #fff;
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        color: @text-color;
        border-radius: 3px;
        margin: 10px 0;
    }
}

将其编译成css后的代码:

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    color: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
}

4.运算:和+ - * /一样 可以操作任何数字类型变量。例如：两个紧邻的 div 标签，第二个标签是第一个标签的两倍宽并且拥有不同的背景色。

@div-width: 100px;
@color: #03A9F4;

div{
    height: 50px;
    display: inline-block;
}

#left{
    width: @div-width;
    background-color: @color - 100;
}

#right{
    width: @div-width * 2;
    background-color: @color;
}

将其编译成css后的代码:

div {
    height: 50px;
    display: inline-block;
}
#left {
    width: 100px;
    background-color: #004590;
}
#right {
    width: 200px;
    background-color: #03a9f4;
}

5.函数: 看一下 fadeout， 一个降低颜色透明度的函数

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

将其编译成css后的代码:

div {
    height: 50px;
    width: 50px;
    background-color: #004590;
}
div:hover {
    background-color: rgba(0, 69, 144, 0.5);
}

当鼠标放在div上时，降低透明度0.5

 想学习更多Less知识，推荐：https://www.w3cschool.cn/less/importing.html

原文来自:https://www.jianshu.com/p/c676041f387e.