Sass: Extending nested selectors

Question

(I think I should mention this, I've only recently started using Sass/SCSS)

http://jsfiddle.net/DriftingSteps/t6kLncfm/

You can see how <strong> is inheriting the properties of the global <a> as well as the properties from nested <a> tag.

a {
    color: #09f;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
        opacity: 0.6;
    }
}

ul {
    font-size: 0.85em;
    a {
        font-family: Georgia, Times, serif;
        font-style: italic;
        color: #0a3;
    }
    strong {
        @extend a;
    }
}

I have been going through http://sass-lang.com/ and I know I'm missing something. What am I doing wrong? Is there a way to inherit properties from the nested <a> only, without the use of classes on either ul a and ul strong? Or is there a better way to do this?

I answered on similair question couple of days ago, it should be useful to you. — Drops
– Drops, Commented May 15, 2015 at 18:55

Scimonster · Accepted Answer · 2015-05-15 09:10:44Z

3

You could use an extend-only selector (%), and extend both ul a and ul strong from that:

a {
    color: #09f;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
        opacity: 0.6;
    }
}

ul {
    font-size: 0.85em;
    a {
      @extend %a;
    }
    strong {
        @extend %a;
    }
}

%a {
    font-family: Georgia, Times, serif;
    font-style: italic;
    color: #0a3;
}

answered May 15, 2015 at 9:10

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Denys Séguret Over a year ago

Good idea to use the extend-only selector here, even if I'm unsure OP really needs @extend.

DriftingSteps Over a year ago

Yes, I see why @extend isn't necessary in this particular condition, but I believe I should be using the extend-only selector. Thanks to both of you :)

Denys Séguret · Accepted Answer · 2015-05-15 09:18:12Z

2

You don't have to use that class and you don't have to apply it to your HTML, you can just define it and refer to it when inheriting:

a, .a {
    font-family: Georgia, Times, serif;
    font-style: italic;
    color: #0a3;
}
strong {
    @extend .a;
}

Demonstration

And of course, in this case you don't really need extend:

a, strong {
    font-family: Georgia, Times, serif;
    font-style: italic;
    color: #0a3;
}
strong {
    // other stuff
}

It seems to me that the real use case of extend isn't deep localized selectors defined together, but rather the extension of a selector defined elsewhere.

edited May 15, 2015 at 9:18

answered May 15, 2015 at 9:10

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

2 Comments

DriftingSteps Over a year ago

I see why extend isn't a better option in this case, but what about cases in which a and strong have conflicting properties (like different background colors)? Use the extend-only selector? Thank you for your time.

Denys Séguret Over a year ago

@DriftingSteps In that case you can just define three rules: one of a, one for strong, and one with the common properties. In the case of local selectors, I find this clearer than using @extend which means you declare then override.

Collectives™ on Stack Overflow

Sass: Extending nested selectors

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related