Less语法的简单使用

最新推荐文章于 2022-10-20 17:20:01 发布

m0_67265464

最新推荐文章于 2022-10-20 17:20:01 发布

阅读量437

点赞数

分类专栏： java 后端文章标签： less css vscode

本文链接：https://blog.csdn.net/m0_67265464/article/details/123494492

版权

438 篇文章 9 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

Less （Leaner Style Sheets ）是一门向后兼容的 CSS 扩展语言，其扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

Less文件后缀是.less，但浏览器不识别Less代码。使用VScode中的插件Easy Less，在我们保存less文件时自动生成css文件

1. 注释

单行注释（ctrl + / ）

// 注释内容

多行注释（shift + alt + A）

/* 注释内容 */

注意：单行注释在转换为css时没有办法显示，因为css没有这种注释方式
在这里插入图片描述

加、减、乘直接书写计算表达式，但除法需要添加 小括号 或 .
在这里插入图片描述
注意：less 4.0.0后除法才使用小括号、.，在此之前直接写/是可以的

使用Less嵌套写法生成后代选择器
在这里插入图片描述

语法：

@import可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

为了控制当前Less文件导出路径，可以在Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

第一种：只有导出路径
//out:./css/
第二种：导出路径,和控制导出的名字
//out:./css/common.css

在这里插入图片描述
注意：并不是所有的Less文件都需要导出CSS文件，如果需要禁止导出 ，则在less文件第一行添加

// out: false

关注