& as sibling for mixin in LESS

Question

I built a mixin to handle icon sprites in my solution, which basically loops through a list of class names and sets the background position relative to it's index in the sprite

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

I then call this mixin inside of another one like this

.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

and the whole thing is then actually used like this

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

So the background position is calculated based on which .icons_list-xxx I use, and the parameter I'm sending in in .small-button decides which y-index is shown (the sprite has 3 variants in a row).

This all works fine when generated as children inside of .small-button, but I've now run up against a case where I need the list generated as sibling selectors to .small-button (giving me .small-button.icon-clock { })

Implementing it like these examples gives me parse errors, understandably:

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

So the question: does anyone have a suggestion for what I can do in this instance?

Thanks for any help guys!

Edit: I found a fix myself, but if anyone has a more elegant solution I'd be happy to hear it!

What I did was extend the .icons_list-small mixin like this

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

Which is then called like this

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

helderdarocha helderdarocha · Accepted Answer · 2014-06-05T12:17:02

One solution would be to use the & in your 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);
    }
}

And when you want to obtain the previous behaviour, to use:

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

Which would generate

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

that is equivalent (in CSS) to

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

And using it without the & *:

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

will generate:

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

& as sibling for mixin in LESS

1 Answers