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 ‘&’.