在LESS中使用BEM类似于使用父母的SASS

Question

我正在尝试重新引用基类，以更改基于BEM修饰符的子类。

这在SASS中运行良好，但我现在正在使用LESS。

以下是SASS参考。。。https://css-tricks.com/the-sass-ampersand/

这是不起作用的代码。。。

.s-body {
@self: &;
...
&__door {
...
&--state-past {
#{@self}__image {
...
}
}
}
&__image {
...
}
}

Answer 1

在LESS中，不可能使用与号(&(将当前类分配给变量。但是您可以将类名设置为这样的变量：

.s-body {
@self: .s-body;
}

之后，您可以使用变量作为选择器，如下所示：@{self}。如需进一步解释，请查看LESS文档：http://lesscss.org/features/#variables-特征变量插值

在您的示例中，这将导致以下代码：

.s-body {
@self: .s-body;

&__door {

&--state-past {
@{self}__image {

}
}
}
&__image {

}
}