less reference

reference 原文

本文采用意译而非直译, 大部分还参考了谷歌翻译, 如有错误欢迎指出更正. 仅用于个人学习记录.

参考: [less/sass]如何避免因公共模块导致生成重复css代码

使用 @import (reference) 引用外部的 less 文件, 除了被用到的文件样式其他部分不会被编译到目标文件.

v1.5.0 版发布

使用方法: @import (reference) "foo.less";

reference 就像是给引用文件的每一个@规则和选择器添加了一个id (reference flag )

引入的时候是正常引入, 但是当生成 CSS 的时候引入文件 的选择器(以及所有仅包含引用选择器的媒体查询: 这句可能翻译的不对, 没明白啥意思)不会被编译输出.

除非通过 mixins 或 extended 使用了, 否则引入文件的样式不会出现在编译生成的 CSS 文件中.

另外, 根据使用方法的不同(mixins 或 extend) reference 会产生不同的结果.

• extend

  当一个选择器被 extend 的时候, 只有新的选择器被标记为未被引用，并且它将被引入到 @import 语句所在的位置。

• mixins

  当引入的样式被 mixin 的时候，它会被混合在使用 mixin 位置的代码中.

例子

执行以下代码可以从 Bootstrap 等库中提取特定的目标样式:

.navbar:extend(.navbar all) {}

您将从 Bootstrap 中仅提取 .navbar 相关样式.