LESS 中的引用导入（相当酷）

您知道如何在 CSS 预处理器中扩展内容吗？（如果不知道，可以 在这里了解。）Sass 可以做到。LESS 可以做到。Stylus 可以做到。虽然这是一个需要谨慎使用的功能（参见 这里 和 这里），但我发现它在某些情况下非常有用。

在芝加哥最近的一次 CodePen 聚会上，我听到 Sam Allan 做了一个关于 LESS 能够 执行 (reference) 导入 的简短演示，我以前从未见过。

它们看起来像这样

/* Normal import */
@import "colors-or-whatever.less";

/* Reference import */
@import (reference) "less-for-reference.less";

正常的导入会获取该文件的内容并将其转储到请求它的文件中。非常有用。文件连接是预处理器的至关重要的功能。(reference) 导入不会这样做。事实上，它根本不会将任何内容放入请求它的文件中。该文件中的代码现在可以使用了，可以通过调用其中的 mixin 或扩展其中的选择器来使用。

这是一个非常强大的概念。这意味着您可以导入整个库，但仅使用您需要的部分。

您是否曾经想使用 CSS 框架或库，但又觉得它太庞大了？

例如，一堆您认为永远不会用到的代码。包含整个库似乎有点过头，更不用说不利于性能了。您可以自己将其分解，但这会破坏升级路径。

使用 (reference) 导入，您可以导入任何您想要的内容，然后仅扩展您想要的部分。这可能有点奇怪，但您可以导入一堆库并挑选和选择部分，只获得您需要的输出。

示例

假设您非常喜欢 Pure CSS。Mattia Migliorini 有一个 LESS 版本的移植。它充满了好的东西，但它有 33 KB，也许您不需要所有这些。

在其中，有一个 .pure-button 类，它是 Pure CSS 对按钮的处理方式。如果您想使用它，您可以这样做

@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/pure.less";

.my-button {
  &:extend(.pure-button all);
}

而且，看，我可以将我的版本命名为任何我想要的名字。而且，如果和何时库更新，我只需更新它即可。假设名称没有改变，我就可以获得更改。

（您在上面看到的 all 关键字表示“也扩展其所有嵌套内容”，这完全是可选的，这是 LESS 扩展可以做的另一件很棒的事情。）

这是该演示

查看 Chris Coyier 在 CodePen 上的笔 GpjzOj（@chriscoyier）。

更多

再次感谢 Sam Allan 向我展示这一点。他还有更多关于这个主题的演示。其中一些他称之为“语义重新映射”，因为他使用了在他看来比原始库使用的更具语义意义的选择器。

查看 dehuszar 在 CodePen 上的笔 语义重新映射 - 框架蜈蚣示例（@dehuszar）。