0

我有一个 Common less 文件和一个 Custom less 文件。

Common less 文件包含所有网站页面的 css 和多个页面的自定义 css。

我想在 Custom less 中使用公共变量。

照我看来：

在 Custom.less.css 文件中：

@import(CommmonSettings.less.css)

@header-color: @orange;
@header-active-color: @orange-dark;

... css code ...

CommonSettings.less.css 文件包含：

@orange: #f58024;
@orange-dark: #d35437;

我该怎么做 ？

4

2 回答 2

1

问题的关键是获得正确的文件扩展名

您的常用设置文件名为CommmonSettings.less.css，这意味着它是一个.css文件，而不是一个.less文件。当您阅读 LESS on importing 的文档时，您会看到如果您这样做......

@import "CommmonSettings.less.css";

...您将文件视为只是.css因为它是其文件扩展名。现在 CSS 对变量和 LESS 的所有很酷的东西一无所知，当 LESS 被告知将文件导入为.css时，它只是复制代码，并忽略将其作为 LESS 处理。

这就是为什么您需要.less仅使用扩展名重命名文件，然后像这样导入它：

@import "CommmonSettings.less";

或者从 LESS 1.4 版开始，您可以保留.css文件扩展名，但强制它在导入时作为 LESS 处理，如下所示：

@import (less) "CommmonSettings.less.css";

其中任何一个都会实际读取@orange您寻找的变量值并使它们在您的自定义文件中可用。但是请注意，如果您希望该文件作为 LESS 处理，则应将该文件的文件名重命名为 Custom.less 而不是 Custom.less.css。一旦处理了 LESS 代码，即将其作为 CSS 文件输出（请参阅 LESS 的客户端或服务器端使用）。

于 2013-10-30T10:07:29.110 回答
0

这是你如何做到的：

在 v1.4.0 中，您可以通过指定选项来强制将文件解释为特定类型，例如

@import (css) "lib";

会输出..

@import "lib";

和

@import (less) "lib.css";

写它@import"CommmonSettings.less.css";应该仍然有效。

于 2013-10-30T08:30:43.967 回答