Web/Css 预处理语言的 Less 的使用 03

2021 年 12 月 12 日
本文字数：519 字
阅读完需：约 2 分钟

特性 1-模块不需要提前导入

在 less 中模块的导入不需要提前

.foo {  background: #fff;}@import "a.less"

复制代码

特性 2-模块后缀名字不限

@import "foo";      @import "foo.less";@import "foo.php";@import "foo.css";

复制代码

特性 3-额外的配置

foo.less

.module-test {  background-color: red;}

复制代码

index.less

@import "./foo.less";

复制代码

reference

less 编译成 css 的文件，代码不生成代码到 css 文件

// index.less@import (reference) "./foo.less";

复制代码

inline

less 编译后的 css 文件，会把模块的代码生成到 css 文件中

// index.less@import (inline) "./foo.less";

// 通过命令lessc index.less index.css// index.css 生成后的代码.module-test {  background-color: red;}

复制代码

less

不管文件名是什么，只导入 less

@import (less) "./foo.less";

复制代码

css

不管文件名是什么，只导入 css

@import (css) "./foo.less";

复制代码

once

文件只导入一次，后续不管导入多少次，都只算一次

@import (once) "foo.less";@import (once) "foo.less"; // 第二句无效

复制代码

multiple

// file: foo.less.a {  color: green;}// file: main.less@import (multiple) "foo.less";@import (multiple) "foo.less";

// 编译后.a {  color: green;}.a {  color: green;}

复制代码

发布于: 3 小时前阅读数: 5

原文链接:【http://xie.infoq.cn/article/ad0c8ecb9b62537942a074b89】。未经作者许可，禁止转载。

Jeannette

关注

一位小码农…… 2019.07.19 加入

科学技术是第一生产力

发布

暂无评论

创作场景

Web/Css 预处理语言的 Less 的使用 03

特性 1-模块不需要提前导入

特性 2-模块后缀名字不限

特性 3-额外的配置

reference

inline

less

css

once

multiple

Jeannette

评论