less.css 跨文件共享变量

Question

我正在使用 less.css 来简化我的 css 样式。 我想在一个 less 文件中声明一个变量，并在我的许多 less 文件中共享它的用法。这可能吗？例如：

english.less

@languageFloat：左；

无图表

div#footer a.web
{   
    display: block;
    float: @languageFloat;
    color: #cccccc;
    margin-right: 10px;
}

Answer 1

最好的方法是 @import LESS 文件，其中包含所有变量。以下是 @import 关键字的语法：

// For LESS file includes,
@import "lib.less";
// or
@import "lib"; // infers the .less extension

// and for plain CSS includes which are added but not parsed by LESS
@import "style.css";

如果您向用户提供 CSS 文件（而不是浏览器内的 less.js 解析），这种方法尤其有效，因为 @import code> 语句会将您的 LESS 和 CSS 文件复合为一个 CSS 文件。也许您可以考虑使用一个包含变量的控制器 LESS 文件，然后是其他 LESS 和 CSS 文件，以便最终结果是您向浏览器提供的单个文件。

我想这会是这样简单的事情：

// Controller.less
@import "english.less";
@import "chart.less";