Question

我在我的解决方案中构建了一个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;
}

然后我将这个mixin称为另一个像这样的

.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-xxx，并且参数I＆＃39; m in .small-button决定显示哪个y-index（精灵连续有3个变体））。

这在.small-button内部作为子项生成时效果很好，但我现在遇到了需要将兄弟选择器生成的列表生成为.small-的情况按钮（给我.small-button.icon-clock {}）

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

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

所以问题是：是否有人建议我在这个例子中可以做些什么？

感谢您的帮助！

编辑：我自己找到了解决办法，但如果有人有更优雅的解决方案，我会很高兴听到它！

我所做的是像这样扩展.icons_list-small mixin

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

然后像这样调用

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

Answer 1

一种解决方案是在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 {...}
...

与

等效（在CSS中）

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

使用它而不使用& *：

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

将生成：

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

＆安培;作为LESS的mixin的兄弟姐妹

1 个答案: