less学习笔记

发表于 2021-12-15 分类于前端

less 是一门 css 的预处理语言，less 是 css 增强版，通过 less 可以编写更少的代码实现更强大的样式

less 语法大体上和 css 一致，但 less 中增添了许多对 css 的扩展

在 less 中添加了许多新特性，如虽然在原生 css 中支持变量，但是对不同浏览器的兼容性不好，有的浏览器不支持，而通过 less 浏览器对变量、minxin 等都可支持

此外 less 中可以使用 @import 引入其他 less 文件有助于样式模块化

浏览器无法直接执行 less 代码，必须先将 less 转换为 css（如 VSCode 中 Easy LESS 插件可将 less 自动编译为 css），再由浏览器执行

基础

变量声明：@变量名:xxx;

使用变量：@变量名

变量在 less 中属于块级作用域，延迟加载

— 当变量作为类名或属性名或一部分值使用时，通过@{变量名}

— 直接使用另一个属性的值 $参考的属性（v3.0.0后支持）

— less 中样式可以嵌套，当表示当前层的元素本身时使用 & 表示，表示子元素时使用>子元素{}

— 当前元素有与其他元素共有的部分时，用 当前元素:extend(有相同样式的元素){}，关键字 all 表示继承所有父类的相关声明块

#test{
    &:extend(.father all)
}
//相当于
#test:extend(.father all){}

实质上将 .father 选择器和 #test 组合成一个选择器，声明块使用 .father 的

注意父类不能定义成混合（继承不灵活但性能高，混合灵活（因为可以传参）但性能低）

— 对其他元素样式进行引用，相当于直接复制其他元素样式 元素选择器();，这种方式性能比上一种差，因为要先复制

— 解决上个问题，可使用类选择器时可在选择器后添加一个括号，实际上就创建了一个mixins（相当于是个混合函数），即这部分样式不是自己用，而是专门给别人用

引入其他 less 文件，通过 @import "xxx.less;"，该功能可用于样式模块化，如将定义变量、定义动画、定义布局、整合的 less 文件分开，方便后期维护

less 中所有数值都可以直接进行运算，如 + - * /

当重复声明时，使用时依据就近原则，使用最近声明的值

可先使用后声明

@a:100px;
@b:#bfa;
@c:box2;
@d:color;
.box1{
    width: @a;
    @{d}: @b;
    background-@{d}:@b;
}
.@{c}{
    width: @a;
    background-image: url("@{C}/1.png");
}
.p2:extend(.p1){
    color:red;
}
.p3{
    .p1();  //mixins，直接对指定样式进行引用
}
.p4(){  //创建了一个mixins
    width:100px;
    height:100px;
}
.test(@w:100px,@h,@bg-color){  //调用混合函数，可指定默认值
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}
div{
    .test(200px,300px,#bfa);  //调用混合函数，按顺序传递参数，或.test(@bg-color:#bfa,@h:300px,@2:200px);
}
.span{
    color: average(red,blue);  //使用 less 定义好的混合函数
}
body:hover{
    background-color: darken(#bfa,20%); //使用 less 定义好的混合函数，当鼠标移入 body 时颜色加深20%
}

less 的避免编译

~"不会被编译的内容"

VSCode 中的插件 Easy LESS

Easy LESS 插件可将 less 自动编译为 css，但是在浏览器中检查页面样式时显示的依然时 css 文件中的代码位置，可在插件中设置如下内容，设置后浏览器中调试样式显示的时在 less 文件中的代码位置

"less.compile":{
    "compress": false,  //true => remove surplus whitespace
    "sourceMap": true,  //true => generate source maps(.css.map files)
    "out": true,   //false => DON'T output .css files(overidable per-file)
}