SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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:

    Code:
    .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

  2. #2
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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 '&'.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •