Less

目录

1，Less是什么？

2，为什么学习less?

3，编译less

4，less的嵌套

5，less定义变量

6，less函数

---

1，Less是什么？

        1， less是css的预处理语言，less增强和扩展了原生css。

        2，less本身是不能直接使用的，必须把它编译成css

2，为什么学习less?

        less写出来的css好维护

3，编译less

        1，Vscode下载插件Easy Less

        2，设置编译输出目录

       3，压缩css文件

 

4，less的嵌套

.header{
    height: 50px;
    //嵌套
    >ul{
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
        background-color: bisque;
        height: 100%;
        li{
            padding: 0 5px;
            a{
                text-decoration: none;
                font-size: 14px;
                color: white;
                font-weight: bold;
            }
        }
    }
}

5，less定义变量

//变量
@baseColor:pink;
@f16:16px;
@h50:50px;
@wd1200:1200px;

6，less函数

// 函数  一次封装，多次调用
.setBoder(@w,@type,@color){
    border: @w @type @color;
}
h1{
    color: @baseColor;
    .setBoder(1px, solid, black)
}