Ampersand not working in :before in SASS

Question

I'm building spritesheet buttons, something like this:

<a class="Button one"></a>
<a class="Button two"></a>

With style:

a {
    // Add basic background and styling
    background: transparent url("images/background_image.png") no-repeat;

    // Add icon on top
    &:before {        
        content: '';
        display: block;

        //....
        background: transparent url("images/icons.png") no-repeat;

        // (1)
        &.one { @include tile(165px, 0, 0) }
        &.two { @include tile(165px, 1, 0) }
    }

    // (2)
    &.one:before { @include tile(165px, 0, 0) }
    &.two:before { @include tile(165px, 1, 0) }
}

Now I want to add the variant styles, but (1) does not work, only (2). Is there no way to avoid repeating the :before?

Answer 1

If you take a look at the compiled CSS, you'd get something like this:

a:before.one { /* ... */ }

CSS pseudo-elements like :before and :after cannot have classes. If you want to make it shorter, one option would be to combine the classes:

a {
    &.one, &.two {
        &:before { @include tile(165px, 0, 0) }
    }
}

But since you want to use different values for the mixin, I think #2 is the cleanest way to go.