Less

约 395 字大约 1 分钟

2024-10-02

简介

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

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

注意

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

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

例子:

LESS

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

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

CSS

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

单行注释: // 注释.

块注释: /* 注释 */.

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

除法需要添加括号或..

LESS

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

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

CSS

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

	width: 25px;
	height: 25px;
}

快速生成后代选择器.

&: 表示当前选择器.

LESS

.父级选择器 {
	color: red;

	a {
		color: green;

		&:hover {
			color: blue;
		}
	}
}

CSS

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

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

使用变量: @变量名.

LESS

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

	.box2 {
		width: @test;
	}
}

CSS

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

导入 Less 公共样式文件.

语法: @import "文件路径".

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

@import "a";

a.less:

LESS

.box{
	width: 100px;
}

CSS

.box {
	width: 100px;
}

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

版权归属：洱海