SASS: Storing `&` in variable

Apparently in SASS you can store the current selector in a variable, eg a{ $a: &; }. Useful for dealing with some limitations of & without having to repeat selectors.

I’ve run into the example that Jake Wilson did, where something like:

.foo{
    &Bar{
        color: blue;
        &:hover .fooBiz{
            color: red;
        }
    }
}

could by DRYer as something like:

.foo{
    $l1: &;
    &Bar{
        color: blue;
        &:hover #{$l1}Biz{
            color: red;
        }
    }
}

I could also see it being used for the trick of duplicating selectors to increase specificy, eg:

.foo{
    $l1: &;
    &#{$l1}{
        color: red;
    }
}

Neat.

Published by

Toby

I am a quiet person from Northeast Ohio. I work as a web developer. I like computers, music, and many other things.

Leave a Reply

Your email address will not be published. Required fields are marked *