LESS 选择器：如何仅对 mixin 内部的元素之一应用样式？

Question

我有一个无法更改的代码：

item.left,
item.centre,
item.right{
.MIXIN();
}

.MIXIN(){
width: 100px;
}

我只需要将宽度应用于 .right 元素。我只能更改 MIXIN() 的内容。我正在考虑使用 &，但它会导致 .right item.right 或 item.right .right，这不是我想要的。有没有办法使用 MIXIN() 的内容为 .right 元素应用样式？

Answer 1

你做不到。唯一的方法是覆盖第一个声明。

   item.left,
   item.centre {
       width: inherit;
   }

Answer 2

如果没有 space，& 怎么样：

.MIXIN() {
    width: 100px;
    &.right { color: red; }
}

它编译成 item.right.right 这有点奇怪，但不会匹配左和中。

Answer 3

可以使用否定CSS伪class:not().

item.left,
item.centre,
item.right{
  width: 20px; 

  &:not(.left):not(.centre) {
    width: 100px;
  }
}

LESS selectors: how to apply styling only for one of the elements from inside mixin?