变量覆盖的继承

Question

我定义了一个 class .class 它使用了一个变量 @var:

@var: 'value';

.class {
    property: @var;
    // and much more stuff [...]
}

现在我想从 .class 继承并同时更改 @var 的值，如下所示：

.another-class {
    @var: 'another-value';
    .class;
}

但似乎没有采用新值 another-value。如何在不更改 .class 的情况下实现此目的？

Answer 1

好的，这个问题似乎是“Can I override global variables from the calling scope". And I found an answer in its comments (https://gist.github.com/seven-phases-max/9473260) 的重复，但这稍微改变了原来的 class：

@var: 'value';

.lib() {
    .class() {
        property: @var;
        // and the rest of `.class`
    }
}

.class {
    .lib.class();
}

.another-class {
    @var: 'another-value';
    .lib.class();
}

Answer 2

在最简单的情况下，我建议的只是一个 parametric mixin，例如：

@var: value;

.mixin(@parameter: @var) {
    property: @parameter;
}

.class {
    .mixin();
}

.another-class {
    .mixin(another-value);
}

（除非你需要重写太多的变量以至于mixin变得过于冗长......但是在这种情况下，重新使用样式的想法本身就有缺陷。选择更好的解决方案可能也是依赖于真实代码（.class 到底是关于什么的，以及它在 CSS 的上下文中实际做了什么）。

在 #2435, there're detailed explanation of why 上有很多关于类似用例的讨论，实际上 Less 是这样工作的 (global scope > caller scope) 以及对参数化的各种优缺点的其他见解通过变量覆盖而不是显式参数传递的混合 and/or 显式 CSS 属性覆盖）。

变量覆盖的继承

Inheritance with variables overriding

less