Extend Back

Extend is a pseudo-class which means to merge selector to what it references. For example:

.item1 {
    &:extend(.item2);
    background: red;
}

.item2 {
    color: red;
}

The snippet above will be converted into such a css style:

.item1 {
    &:extend(.item2);
    background: red;
}

.item2,
.item1 {
    color: red;
}

1.1 Extend Syantax

.a:extend(.b) {}

/** the above block does the same thing as the below block */
.a {
    &:extend(.b);
}

.c:extend(.d all) {
    // extends all instances of ".d" e.g. ".x.d" or ".d.x"
}
.c:extend(.d) {
    // extends only instances where the selector will be output as just ".d"
}

Despite of these syntax, you can also contain more than one selectors with comma as separators:

.e:extend(.f, .g) {}