Simple Sass @extends and % issue
I'm probably doing something stupid, but I have the following code:
I want
%list-navigation
to extend the default styling from %list
. From what I've read, this should work. I then have a class list-navigation
that extends %list-navigation
, but it's not inheriting the default styling, in this case the reset-list
mixin. I have to correct class names in my HTML. Is this not how Sass works? It's not working for my other mixins either31 Replies
best way is to always look at the output css
You mean the actual stylesheet to check for the selectors? I've already checked devtools and it's not applying the styling
yea the .css output
Its been awhile but are you supposed to be mixing these two?
I've only extended classes so
I'm following this article: https://www.smashingmagazine.com/2015/05/extending-in-sass-without-mess/ which shows to do this, not really sure the exact reason why
and from what I remember it would not extend the nested modifiers with it π€
2015 article xD
π
Yea you got a point
I don't know, it looks like it should work though
Sass: @extend
Syntactically Awesome Style Sheets
It's neater than writing out separate classes, if it actually works and I'm not being stupid
Extends are resolved after the rest of your stylesheet is compiled. In particular, it happens after parent selectors are resolved. This means that if you @extend .error, it wonβt affect the inner selector in .error { &__icon { ... } }. It also means that parent selectors in SassScript canβt see the results of extend.mmm yea not sure cause docs show it too https://sass-lang.com/documentation/style-rules/placeholder-selectors but again its not going to extend the nested like that ?
Sorry, I was trying to make sense of what you linked me was saying, what you have here definitely works I was just hoping there was a nicer way to write it (like in the article I mentioned) I guess there isn't π©
Actually, would that extend the base %list styling though?
Or do I have to @extend %list inside %list-navigation?
You really don't need placeholders if you were going to have the same class and not reuse the placeholder though.
Yea that is a fair point lol
mm yea idk check the output xD
I think it should π€
Let's see
So I ended up doing:
Makes more sense, like you said no point in using % if I'm not reusing
James Steinbach
When I Use (and Donβt Use) Sass Extend β’ James Steinbach
Front-end architect. Speaker & writer. React & Vue, Sass & CSS, performance & accessibility.
Oh wait I'm being stupid, haha
Here they are saying to only extend placeholders so π€·ββοΈ
Awesome, let me check this out
Dave Redfern
Use Sass placeholders and extend wisely βΒ a cautionary tale
Extends are probably one of the biggest selling points to use Sass. They allow you to say this selector has the same styling as thisΒ other element ...
Another good read
All of the Sass info I have saved* is pretty old too seems like xD
I've been holding off to take Kevins Sass course, and now I don't even know if I will cause I don't use it enough anymore >.>;
You gave me a lot of great resources, thanks b1! I'll read through all this and come back with my findings π€
Ah I see, I didn't know that. Whenever you use
@extend
, it pretty much copies the selectors everywhere the extended
class is
Which is why you use placeholders, so that doesn't happen
So I ended up having to go with
I literally have no idea why I couldn't do what I posted earlier or something like
I checked my compiled css and it just would not apply the base styling from %list to .list-navigation
This can't be an @extend
s issue at this point. I even tried:
And it compiles to:
I made a minimal reproduceable example:
Sass:
Compiled css:
looks correct
Shouldn't
.link-navigation
inherit .link
properties?nope not how nesting works, you are still relying on inheritance at that point
you would want like
Ah dang, I thought that's how it worked that whole time... π
that is why looking at the output is good
So I would have to explicitly
@extend
s then?
This works:
CSS nesting will work the same way.
yea and makes sense to use a placeholder too
Thanks again b1! I've learned a lot today (and had a lot of headache π ). Now I need to read up on inheritance properly so this doesn't happen again haha
yea np thanks for helping me learn how to use extends properly π
We learned together today π€
π₯³