包含较少的文件并传递参数

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

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