使用 LESS 的 Mixin答案

【问题标题】：Mixin using LESS使用 LESS 的 Mixin
【发布时间】：2023-03-28 15:11:01
【问题描述】：

我正在阅读 LESS 官方文档（1.5 版），但我不明白如何导入对另一个 CSS 的引用以便在我自己的文件中使用它的内容。例如：

mystyle.less

@import (reference) "bootstrap.min.css";
.mylabel {
    .label-success;
}

显示此错误：NameError: .label-success is undefined

也许我误解了文档？

【问题讨论】：

【解决方案1】：

您只能将reference 与其他 LESS 文件一起使用。您不能使用该方法混合和匹配 LESS 和 CSS 文件。

如果您需要使用 Bootstrap 中的 mixin，请获取 Bootstrap LESS 文件。

更新： 您还可以指定引用类型，它应该可以满足您的需要：

@import (reference, less) "bootstrap.min.css";

【讨论】：

其实你也可以用 CSS 来使用它，我刚刚用@import (reference, less) "bootstrap.min.css"; 试过了，它可以工作（至少在 1.5.1 中）。
是的，但这实际上将文件引用到内存中（作为解析的 LESS 代码），然后仅渲染使用的 mixin。我已经更新了我的答案以包括 reference, less 警告。
不完全。没有 reference, less 标志的导入 CSS 文件不会通过解析器（因此不会加载到内存中）。它们只是作为@import 规则添加到生成的<style> 标记（或文件）中。
（对不起，我在看到你的回复之前删除了我的上一条评论）。无论哪种方式，它当然必须解析它，否则它就无法知道内部的任何.label-success。
没有。如果您在 LESS 文件中使用常规 @import，则不会尝试解析内容。浏览器知道如何设置 .label-success 样式的事实是由于传统的 CSS 解析，而不是 LESS 解析。不要混淆两者。