CSS一篇文章搞懂系列8：预处理语言less，高效扩展复用偷懒能人

本文链接：https://blog.csdn.net/qq_42647903/article/details/108000124

一、意义：

觉得CSS的功能不够用不兼容不方便，语法结构也不够清晰

于是设计了新的less，作为更强大的CSS，用更少的代码实现更强的样式。更类似于编程语言。

<!--
    less:预处理脚本语言。
       觉得CSS的功能不够用不兼容不方便，语法结构也不够清晰
       于是设计了新的less，作为更强大的CSS，用更少的代码实现更强的样式。更类似于编程语言。
       浏览器是无法直接渲染less文件，所以less文件编译好之后还需要编译成CSS文件

    1.结构块更清晰，直接祖先里面包含子类
       .box{
           .box2{
           }
       }

       用 & 直接表示外层的父类
       .box{
           &:hover{
           }
       }

    2.抽象变量，易维护。变量有重复定义时，就近原则。
        @w:300px; 
        @name:box4; 作为变量名使用时需要，.@{name}
        @color_use:red;

    3.minix，混合函数，易扩展。
        .box5(@wid:300px,@hei:200px,@color:red){
                width: @wid;
                height: @hei;
                background-color: @color;
             }

-->

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href=".//CSS07_less_test.css">
</head>
<body>

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

下面为less文件里面的内容：

//1. 结构上的直观性
.box1{
    width: 300px;
    height: 500px;
    background-color: beige;

    .box2{
        width: 200px;
        height: 100px;
        background-color: green;
    }

}

//2.测试变量之间的复用与易于维护

@w:300px;
@name:box4;
@color_use:red;

.@{name}{
    width: @w;
    height: @w;
    background-color: @color_use;

}

/*这个函数型是不会在CSS文件中显示出来的，但是相当于函数一样可以直接调用，设置默认值*/
.box5(@wid:300px,@hei:200px,@color:red){
    width: @wid;
    height: @hei;
    background-color: @color;
}

.box6{
    .box5();
    border:2px solid @color_use;
}

/*下面为自动生成编译的css文件*/

.box1 {
  width: 300px;
  height: 500px;
  background-color: beige;
}
.box1 .box2 {
  width: 200px;
  height: 100px;
  background-color: green;
}
.box4 {
  width: 300px;
  height: 300px;
  background-color: red;
}
/*这个函数型是不会在CSS文件中显示出来的，但是相当于函数一样可以直接调用，设置默认值*/
.box6 {
  width: 300px;
  height: 200px;
  background-color: red;
  border: 2px solid red;
}