less.css跨文件共享变量

Question

我使用less.css来简化我的CSS样式.我想在一个较少的文件中声明一个变量,并在我更少的文件中共享它的用法.这可能吗？例如:

english.less

@languageFloat:left;

chart.less

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

Answer 1

执行此操作的最佳方法是将@importLESS文件中包含所有变量.这是@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语句会将您的LESS和CSS文件复合到一个CSS文件中.也许您可以考虑使用一个包含变量的控制器LESS文件,然后考虑其他LESS和CSS文件,以便最终结果是您为浏览器提供的单个文件.

我想这会像这样简单:

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