Sass @extends vs &

Hello all,

I have been using Sass quite a lot over the past few months and for instance, if I have two classes on an element and want to add styles to each I would use this:

.class1 {
    style: value;

    &.class2 {
        style: value;
    }
}

I have heard that in Sass 3.2 that @extends replaces &, but I can’t seem to figure out what the actual difference is. @extends seems to add one selectors styles to another, How would I use @extends to achieve the multiple classes issue above?

Kind regards,
Neil

According to the official info, it’s deprecation, not replacement, in a particular scenario:

&foo is gone, but & foo is ok (must have a space)

One has to distinguish among &foo, &.foo and & foo.

Use @extends instead of this.
means &foo alone.

<hr>

@extend doesn’t replace the reference to the parent selector: &. The two function differently and serve distinct purposes. The new ‘%’ provides a better placeholder instead.

What @extend does now is producing new selectors. With the ‘%’ new implementation, @extend behaves also like ‘&’ and it adds to the existing selector, it doesn’t create a new one, only it’s not restricted to referencing the parent selector only, like ‘&’ is.

<hr>

The problem with ‘&’ placeholder is that it’s restricted to current nested SCSS, and collects all the selectors to the node.

@extend works throughout the entire stylesheet, and with the new ‘%’ option it’s now kind of a universal and custom ‘&’.