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

Question

希望在“.media”下的状态下捕获“&”的值。希望我可以利用 BEVM 风格的方法。

.media {

    @this: &;

    &__body {
        float: right;
    }

    &.-reverse {

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

希望生产

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

但得到

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

如果我单独依靠&我显然得到

.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;
}

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

LESS CSS How to capture parent selector in variable

less