Css &；作为兄弟姐妹混入较少

在我的解决方案中，我构建了一个mixin来处理图标精灵，它基本上循环遍历一个类名列表，并在精灵中设置相对于其索引的背景位置

@icon_size-small: 16;
@icon_size-medium: 24;
@icon_size-large: 32;

.commonIcons(@iconSize, @y: 1, @x: 0) {
    @posY: (@iconSize * @y);
    @posX: (@iconSize * @x);

    background: url('images/icons/commonIcons@{iconSize}x@{iconSize}.png') -@posX + 0px -@posY + 0px no-repeat;
    height: @iconSize + 0px;
    width: @iconSize + 0px;
}

我把它叫做另一个里面的混合物

.icons_list-small(@modifier, @x) {
    .icon-clock             { .commonIcons(@icon_size-small, 1, @x); }
    .icon-checkmark         { .commonIcons(@icon_size-small, 2, @x); }
    .icon-stop              { .commonIcons(@icon_size-small, 3, @x); }
etc

.small-button {
    .icons_list-small(0);
}

.icons_list-small(@modifier, @x) {
    @{modifier}.icon -clock { .commonIcons(@icon_size-small, 1, @x); }

.icons_list-small(~".icon--inverted", 0);

然后整个过程实际上就是这样使用的

.icons_list-small(@modifier, @x) {
    .icon-clock             { .commonIcons(@icon_size-small, 1, @x); }
    .icon-checkmark         { .commonIcons(@icon_size-small, 2, @x); }
    .icon-stop              { .commonIcons(@icon_size-small, 3, @x); }
etc

.small-button {
    .icons_list-small(0);
}

.icons_list-small(@modifier, @x) {
    @{modifier}.icon -clock { .commonIcons(@icon_size-small, 1, @x); }

.icons_list-small(~".icon--inverted", 0);

因此，背景位置是根据我使用的.icons\u list-xxx和我发送的参数来计算的。小按钮决定显示哪个y索引（精灵在一行中有3个变体）

当在.small button中作为子对象生成时，这一切都可以正常工作，但我现在遇到了一个情况，需要将列表作为.small button的同级选择器生成（给我.small-button.icon-clock{}）

像这些示例一样实现它会给我带来解析错误，这是可以理解的：

.small-button.icons_list-small(0);
    or
.small-button {
    &.icons_list-small(0);
}

所以问题是：有人对我在这种情况下能做什么有建议吗

谢谢大家的帮助

编辑：我自己找到了解决方案，但如果有人有更优雅的解决方案，我很乐意听到

我所做的是像这样扩展.icons\u列表-小混音

.icons_list-small(@modifier, @x) {
    .icon-clock             { .commonIcons(@icon_size-small, 1, @x); }
    .icon-checkmark         { .commonIcons(@icon_size-small, 2, @x); }
    .icon-stop              { .commonIcons(@icon_size-small, 3, @x); }
etc

.small-button {
    .icons_list-small(0);
}

.icons_list-small(@modifier, @x) {
    @{modifier}.icon -clock { .commonIcons(@icon_size-small, 1, @x); }

.icons_list-small(~".icon--inverted", 0);

那就这样叫

.icons_list-small(@modifier, @x) {
    .icon-clock             { .commonIcons(@icon_size-small, 1, @x); }
    .icon-checkmark         { .commonIcons(@icon_size-small, 2, @x); }
    .icon-stop              { .commonIcons(@icon_size-small, 3, @x); }
etc

.small-button {
    .icons_list-small(0);
}

.icons_list-small(@modifier, @x) {
    @{modifier}.icon -clock { .commonIcons(@icon_size-small, 1, @x); }

.icons_list-small(~".icon--inverted", 0);

---

一种解决方案是在mixin中使用

&

：

.icons_list-small(@x) {
    &.icon-clock {
      .commonIcons(@icon_size-small, 1, @x);
    }
    &.icon-checkmark {
      .commonIcons(@icon_size-small, 2, @x);
    }
    &.icon-stop {
      .commonIcons(@icon_size-small, 3, @x);
    }
}

当您想要获得之前的行为时，请使用：

.small-button {
  & * {
    .icons_list-small(0);
  }
}

这将产生

.small-button *.icon-clock {...}
...

这相当于

并且在不使用

&*

的情况下使用它：

.small-button {
    .icons_list-small(0);
} 

将产生：

.small-button.icon-clock {...}
...

---

谢谢Helder，我用一个解决方案更新了我原来的问题，但我认为你的问题更有意义，因为它更容易阅读（也就是说，看起来更像你期望的CSS/less阅读）。好主意，非常感谢！顺便说一句，它不是

&*

或简单地

*

（

&

在那里是不必要的），而是类似于

@{{u}

（使用

@:~”；

）<代码>*显然会无缘无故地加重浏览器的负担。实际上，我会为每种情况定义两个mixin，比如。