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

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