less - 包含一个 less 文件并传递参数

Question

我有一个 common.less文件，它为不同的皮肤实现了基本的 CSS:

@textColor: black;
@iconSize: 16px;

.container: {
    color: @textColor;
    background-color: white;
}
.icon: {
    width: @iconSize;
    height: @iconSize;
}
// note that @iconSize is also used in this file inside mixins

计划是这样使用它 skin_1.less :

@iconSize: 32px; // override the icon size
                 // but leave @textColor as default
@import "common.less";

.container: {
    color: red;
}
// I would now have big icons and red text

所以我想有一个通用的风格，我可以重用和有选择地覆盖变量。

然而，这并不奏效。我认为这是因为导入总是移到顶部，因此无法预定义变量。
(我还读到变量是相当常量，所以这可能是另一个问题。)

无论如何:有没有更好的模式来解决我的用例？

Answer 1

您不需要拆分文件，只需在导入后覆盖变量即可。变量总是被解析为最后一个定义，即使它在它被使用的地方之后。