less.css在文件之间共享变量

71

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

少英语

@languageFloat：左;

无图

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

less

— 冯迪普
source

77

最好的方法是将@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";

— 内森·斯特鲁兹（Nathan Strutz）
source

有趣的是，尽管我需要共享一个条件CSS文件，但英语可以用德语，俄语等代替。我可以有条件地导入CSS库吗？

— vondip 2011年

4

有趣的是，我从您最初的问题中看不到那个问题。LESS还没有条件语句，因此您必须进行声明式思考。做一个englishContainer.less文件导入english.less和chart.less，然后germanContainer.less文件导入german.less和chart.less等，这可能的方式做到这一点。

— 内森·斯特鲁兹

-1

//例如BlueTheme.less Less文件---------
@import "DefaultBlueParameters.less"; <---仅主题less vars

@import (less) "DefaultBase.css"; <-有用途 DefaultBlueParameters.less vars

它生成BlueTheme.css

— 塔德乌什·科兹洛夫斯基（TadeušKozlovski）
source

2

欢迎使用StackOverflow，并感谢您的帮助。您可能想通过添加一些解释来使答案更好。

— 埃利亚斯议员