在 Less CSS 中跨文件定义变量答案

【问题标题】：Defining variables across files in Less CSS在 Less CSS 中跨文件定义变量
【发布时间】：2012-09-14 21:23:56
【问题描述】：

我正在尝试使用 Bootstrap CSS 创建具有多种配色方案的 CSS 主题。每个配色方案都构建为 boostrap.less 文件的修改版本：bootstrap-red.less、bootstrap-green.less 等等。

每个 Bootstrap 版本所做的是导入所有默认的 Bootstrap 文件，然后是适当的调色板，然后是主题的核心结构。例如bootstrap-red.less:

@import "reset.less";
@import "variables.less";
@import "mixins.less";

/* and so on... until */

// Custom code
@import "elements.less";
@import "_mytheme-color-scheme-red.less";
@import "_mytheme-core.less";

在_mytheme-color-scheme-red.less中，我定义变量如：

@bannerBackground: #59a449;

但是，在编译 bootstrap-red.less 时，我得到：

NameError: variable @bannerBackground is undefined in /.../css/less/_mytheme-core.less

为什么会这样？我原以为它会起作用，因为variables.less 文件中的变量以相同的方式定义，并且可以在后续文件中使用。

我查看了类似的问题并尝试了不同的方法，但无济于事：

@importing "_mytheme-color-scheme-red.less" 在文件中 _mytheme-core.less - 不可行；此外，Bootstrap 不这样做，但它仍然有效。
在没有 BOM 的情况下以 UTF-8 编码文件 - 不起作用，结果相同。

在我看来，文件_mytheme-color-scheme-red.less 根本没有被处理。就好像 Less 编译器只是跳过它并直接使用 _mytheme-core.less 我该如何解决这个问题？

【问题讨论】：

这听起来像是我对 LESS 的体验，至少在使用 SimpLESS 编译它时是这样。我切换预处理器的众多原因之一。通过 mixins 传递变量不是一种选择吗？
你用的是哪种编译方式？您是否尝试在 variables.less 之后立即导入变量？
@Sherbrow 我现在试了一下，结果是一样的。我真的不明白，它总是无论如何都会跳过我的变量文件。
@cimmanon 我正在使用 LESS 的 Node.JS 版本进行编译，我不知道周围还有其他编译器。你现在用什么有效？另外，我了解mixins，但我想不出一种方法来使用它们来实现我想要的，你能给我举个例子吗？
几个月前 SimpLESS 发布新版本后，我切换到 Sass，导致我的文件无法正确编译。 WinLESS 在编译时遇到了更多问题，所以要么安装 Ruby for Sass（无论如何这是我的首选），要么安装 Node.JS。在我的服务器管理员眼中，Ruby 是两害相权取其轻。

标签： css twitter-bootstrap less

【解决方案1】：

已修复。问题毕竟是编码：LESS 编译器跳过了所有错误编码的文件。显然，即使您告诉 Sublime Text 也无法在没有 BOM 的情况下正确保存为 UTF-8；我的文件都在 ANSI 或 UTF-8 with BOM 中。为了将它们转换为纯 UTF-8，我不得不求助于 Notepad++。我现在觉得自己很傻。

来源：Variable Name Error "is undefined" even though "variables.less" imported

【讨论】：

【解决方案2】：

我在编译 Bootstrap 2 时遇到了与 LessCss 2.x 类似的错误，降级到 LessCss 1.7.5 为我解决了这个问题。

【讨论】：