Less

简介

Less是一个CSS预处理器, Less文件后缀是.less

扩充了CSS语言, 使CSS具备一定的逻辑性, 计算能力

警告

浏览器不识别Less代码, 目前阶段, 网页要引入对应的CSS文件

VSCode插件:Easy LESS, 保存Less文件后, 自动生成对应的CSS文件

例子:

.a {
    color: red;
    width: (68 / 37.5rem);

    .b {
        height: (29/37.5rem);
    }
}

生成结果:

.a {
    color: red;
    width: 1.81333333rem;
}
.a .b {
    height: 0.77333333rem;
}

注释

单行注释:// 注释

块注释:/* 注释 */

运算

加减乘直接书写计算表达式即可

除法需要添加括号或.

.box {
    width: 100 + 50px;
    height: 5 * 20px;

    width: (100 / 4px);
    height: 100 ./ 4px;
}

生成结果:

.box {
  width: 150px;
  height: 100px;
  width: 25px;
  height: 25px;
}

嵌套

快速生成后代选择器

&:表示当前选择器

.父级选择器 {
    color: red;

    a {
        color: green;

        &:hover {
            color: blue;
        }
    }
}

生成结果:

.父级选择器 {
  color: red;
}
.父级选择器 a {
  color: green;
}
.父级选择器 a:hover {
  color: blue;
}

变量

定义变量:@变量名: 数据

使用变量:@变量名

.box {
    @test: 114514;
    width: @test;

    .box2 {
        width: @test;
    }
}

生成结果:

.box {
  width: 114514;
}
.box .box2 {
  width: 114514;
}

导入

导入Less公共样式文件

语法:@import "文件路径"

提示:如果是Less文件, 可以省略后缀

@import "a";

a.less:

.box{
    width: 100px;
}

生成结果:

.box {
  width: 100px;
}

导出

在Less文件的第一行添加// out: 存储路径