less css预处理语言

蔬菜_

于 2020-03-18 15:48:19 发布

阅读量261

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： less css

本文链接：https://blog.csdn.net/hello917/article/details/104945423

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用npm和VSCode安装并配置Less预处理器，包括变量声明、嵌套规则、注释及算术运算等基本语法，使读者能够快速上手Less，提升CSS编写效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装
npm i -g less

使用
vscode安装插件easy less
新建一个less文件
例如:test.less
每次保存的时候，都会自动编译一个css文件然后页面引入编译后的css文件即可。

@声明变量

注:声明变量不能有特殊字符 .不能数字开头,可以数字结尾.区分大小写
例如: @colorp:purple;

嵌套
例如:

.father{
		.son{
			background-color:@colorp;
		}
}

ps：如果有伪类，交集，伪元素选择器，我们内层选择器的前面要加&
例如:

a{
	&:hover{
			color:pink
	}
}

编译后:

a:hover{
		color:pink
}

less注释是 //

less运算 + - * /
例如:

@num:10px + 5
div{
	width:@num * 2rem;
	height:@num / 2rem;
	border:@num solid black;
}
ps:运算符左右两边需要空格隔开
两个数参与运算，如果只有一个数有单位，那么结果就以该单位。
如果两个参数都有单位，那么结果就以第一个参数的单位为准。