Less：语法、VScode中的配置

_七七

已于 2022-10-18 12:00:07 修改

阅读量365

点赞数

分类专栏： HTML5+CSS 文章标签： less vscode 前端

于 2022-07-19 14:37:15 首次发布

本文链接：https://blog.csdn.net/qq_43472877/article/details/125871663

版权

HTML5+CSS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

本文介绍了Less CSS预处理器的基本语法，包括注释、四则运算、后代选择器，以及如何通过VScode插件实现Less文件的自动编译。还讲解了变量管理和文件导入导出，以及如何在VScode中配置禁止导出CSS文件并自定义输出路径。

摘要由CSDN通过智能技术生成

Less语法

使用Less语法快速编译生成CSS代码

Less是一个CSS预处理器, Less文件后缀是.less
扩充了CSS 语言, 使CSS具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

Easy Less:

vscode插件
作用：less文件保存自动生成css文件

注释

单行注释

语法：//注释内容
快捷键：ctrl+/

块注释

语法：/* 注释内容*/
快捷键：shift+alt+A

在这里插入图片描述

四则运算

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

除法需要添加小括号或.
注意：
表达式存在多个单位以第一个单位为准

后代选择器

在这里插入图片描述

变量

把颜色提前存储到一个容器，设置属性值为这个容器名

变量：存储数据，方便使用和修改。

语法：
定义变量：@变量名:值;
使用变量：CSS属性：@变量名;

导入

在这里插入图片描述

导出CSS文件

在这里插入图片描述

禁止导出

在这里插入图片描述

Less VScode中的配置


"less.compile": {
	"compress": false,//是否压缩
	"sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
	
	"out": true, // 是否输出css文件，false为不输出
	"out": "../css/" /给定相对路径
	"outExt": ".css", // 输出文件的后缀,小程序可以写‘wxss‘
}