LESS CSS如何在变量中捕获父选择器

Question

希望捕捉“＆amp;”的价值在“.media”下的状态。希望我可以使用BEVM风格的方法。

.media {

    @this: &;

    &__body {
        float: right;
    }

    &.-reverse {

        @{this}__body {
            color: blue;
        }
    }
}

希望生产

.media.-reverse .media__body {
    float: left;
}

但是

.media.-reverse &__body {
    float: left;
}

如果我依赖＆amp;我明显得到了

.media.-reverse__body {
    color: blue;
}

Answer 1

您可以使用父参考&来解决您的问题（更改选择器顺序）[http://lesscss.org/features/#parent-selectors-feature-changing-selector-order]

.media {
   &__body{
     color: green;
   }
   &.-reverse & {
     &__body {
       color: red;
     }
   }
}

编译成CSS代码如下：

.media__body {
  color: green;
}
.media.-reverse .media__body {
  color: red;
}