css预处理器-less

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

什么是less

less-是一种css预处理器，我们可以通过less语法来编写更为简洁的css语法

为什么要有less

<style>
    .box1 {
      width: 300px;
      height: 300px;
      background-color: lightcoral;
    }
    .box1 .box2 {
      width: 200px;
      height: 200px;
      background-color: lightblue;
    }
    .box1 .box2 .box3 {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
    }
</style>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>

我们用css语法为页面中的3个div设置背景色的时候需要一层一层分别设置，这样写的嵌套关系不是很明确，在less中，我们可以用下面的语法去写这种嵌套关系

.box1{
    width: 300px;
    height: 300px;
    background-color: lightcoral;
    .box2{
        width: 200px;
        height: 200px;
        background-color: lightblue;
        .box3{
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
    }
}

这种写法和原生的CSS语法效果相同，既减少了代码量，又明确的div的嵌套关系。

变量

在变量中，我们可以任意设置变量的值。
使用变量：

直接使用变量:@变量名
作为css类名使用: .@{变量名}{...}

优点：可复用、修改方便(修改变量值，所有用到该变量的地方都会改变)

<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
</body>

    @width:200px;
    @height:200px;
    @color:red;
    @box:box2;

    .box1{
        width: @width;
        height: @height;
        background-color: @color;
    }
    .@{box}{
        width: @width;
        height: @height;
        background-color: lightgreen;
    }

效果

:extend()

对当前选择器扩展指定选择器的样式
使用方法:当前选择器:extend(指定选择器)


<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
</body>

.box1{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.box2:extend(.box1){
    background: lightgreen;
}

混合(Mixins)

类似js中的函数调用，可以将当前的css代码块复制到其他选择器中
使用方法:选择器()

<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
</body>

.box1{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.box2{
    .box1();
    background: lightgreen;
}

:extend VS 混合(Mixins)

从上面的两个例子中，我们可以看到:extend和混合(Mixins)这两种用法不同，但是实现的效果是相同的，那么他们到底也什么区别呢？下面我把以上两种less写法编译后的css贴出来

//:extend编译前
.box1{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.box2:extend(.box1){
    background: lightgreen;
}
//编译后的css代码
.box1,
.box2 {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin-bottom: 10px;
}
.box2 {
  background: lightgreen;
}

//混合(Mixins)编译前
.box1{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.box2{
    .box1();
    background: lightgreen;
}
//编译后的css代码
.box1 {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin-bottom: 10px;
}
.box2 {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin-bottom: 10px;
  background: lightgreen;
}

通过对比我们可以发现，:extend,编译后是用了css选择器分组的方式，而混合(Mixins)编译后是复制了一份css代码

混合(Mixins)高级用法

通过上面的对比，我们知道混合函数的用法和:extend的用法还是有一些区别的。但是这些区别并不足以说明问题，反而让我们觉得混合函数使代码量更多了。但真的是这样嘛？

<body>
    <div class="box">
    </div>
</body>

.test(@w,@h,@color){
    width: @w;
    height: @h;
    border: 1px solid #000;
    background-color: @color;
}
.box{
    .test(200px, 200px,yellow)
}

这才是混合函数真正厉害的用法，我们定义好函数后，完全可以像js函数一样去传参去调用。

如何使用less

说了半天less语法，我们到底如何使用less呢？要知道，在浏览器中是不支持less语法的！！！ 所有的less语法都需要编译成css语法才能让浏览器认识。下面介绍2种less用法

非构建工具创建的项目中使用less 这种项目我们一般写测试会用到。我们可以在vscode中安装一个Easy LESS的插件，这个插件的作用就是可以把我们创建的less文件自动生成一份编译后的css文件,我们在页面中引入css文件的时候直接引入编译后的css文件即可

框架中使用less 框架中使用less就简单了，我们直接安装对应的依赖即可
npm install less less-loader --save-dev
注意：这里推荐指定版本号去安装，不然有可能会报错（贴一张我安装的版本）

用法:我们以vue框架为例子，直接将style中的lang设置为less，引入对应的less文件即可

结尾

当然，less的语法不止这些。这里只介绍一些常用的比较方便的语法，更多用法请移步至less快速入门