css - 如何在 less 中分离设置和 css？

Question

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

Common less 文件包含所有网站页面的 css 和几个页面的 Custom a css。

我想在 Custom less 中使用 Common 变量。

如我所见:

在 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;

我该怎么做？

Answer 1

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

您的常用设置文件名为 CommmonSettings.less.css，这意味着它是一个 .css 文件，而不是 .less文件。当you read the documentation for 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 文件 ( see Client-Side or Server-side usage of LESS )。