Simple Sass @extends and % issue

I'm probably doing something stupid, but I have the following code:

%list {
  @include mixins.reset-list();

  &-navigation {
    display: none;

    @media (min-width: tokens.$bp-main-nav) {
      @include mixins.flex(row, center, center, 4);
    }
  }
}

.list {
  @extend %list;

  &-navigation {
    @extend %list-navigation;
  }
}

%list {
  @include mixins.reset-list();

  &-navigation {
    display: none;

    @media (min-width: tokens.$bp-main-nav) {
      @include mixins.flex(row, center, center, 4);
    }
  }
}

.list {
  @extend %list;

  &-navigation {
    @extend %list-navigation;
  }
}

I want

%list-navigation

%list-navigation

to extend the default styling from

%list

%list

. From what I've read, this should work. I then have a class

list-navigation

list-navigation

that extends

%list-navigation

%list-navigation

, but it's not inheriting the default styling, in this case the

reset-list

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 either

b1mind•4/20/23, 10:15 PM

best way is to always look at the output css

vinceOP•4/20/23, 10:15 PM

You mean the actual stylesheet to check for the selectors? I've already checked devtools and it's not applying the styling

b1mind•4/20/23, 10:16 PM

yea the .css output

b1mind•4/20/23, 10:16 PM

Its been awhile but are you supposed to be mixing these two?

b1mind•4/20/23, 10:17 PM

I've only extended classes so

vinceOP•4/20/23, 10:18 PM

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

b1mind•4/20/23, 10:18 PM

and from what I remember it would not extend the nested modifiers with it

b1mind•4/20/23, 10:18 PM

2015 article xD

vinceOP•4/20/23, 10:18 PM

Yea you got a point

vinceOP•4/20/23, 10:18 PM

I don't know, it looks like it should work though

b1mind•4/20/23, 10:18 PM

https://sass-lang.com/documentation/at-rules/extend

Sass: @extend

Syntactically Awesome Style Sheets

vinceOP•4/20/23, 10:18 PM

It's neater than writing out separate classes, if it actually works and I'm not being stupid

b1mind•4/20/23, 10:19 PM

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.

b1mind•4/20/23, 10:21 PM

mmm yea not sure cause docs show it too

b1mind•4/20/23, 10:21 PM

https://sass-lang.com/documentation/style-rules/placeholder-selectors

b1mind•4/20/23, 10:22 PM

but again its not going to extend the nested like that

b1mind•4/20/23, 10:22 PM

Bb1mind ```sass %list { @include mixins.reset-list(); } %list-navigation { displa...

vinceOP•4/20/23, 10:24 PM

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

vinceOP•4/20/23, 10:24 PM

Actually, would that extend the base %list styling though?

vinceOP•4/20/23, 10:25 PM

Or do I have to @extend %list inside %list-navigation?

b1mind•4/20/23, 10:25 PM

You really don't need placeholders if you were going to have the same class and not reuse the placeholder though.

vinceOP•4/20/23, 10:25 PM

Yea that is a fair point lol

Vvince Actually, would that extend the base %list styling though?

b1mind•4/20/23, 10:25 PM

mm yea idk check the output xD

b1mind•4/20/23, 10:25 PM

I think it should

vinceOP•4/20/23, 10:26 PM

Let's see

vinceOP•4/20/23, 10:27 PM

So I ended up doing:

vinceOP•4/20/23, 10:27 PM

Makes more sense, like you said no point in using % if I'm not reusing

b1mind•4/20/23, 10:28 PM

https://jdsteinbach.com/sass/use-extend/

James Steinbach

When I Use (and Don’t Use) Sass Extend • James Steinbach

Front-end architect. Speaker & writer. React & Vue, Sass & CSS, performance & accessibility.

Vvince So I ended up doing: ```css %list { @include mixins.reset-list(); } .list { ...

vinceOP•4/20/23, 10:28 PM

Oh wait I'm being stupid, haha

b1mind•4/20/23, 10:28 PM

Here they are saying to only extend placeholders so

vinceOP•4/20/23, 10:28 PM

Awesome, let me check this out

b1mind•4/20/23, 10:30 PM

https://daveredfern.com/use-sass-placeholders-and-extend-wisely-a-cautionary-tale/

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

b1mind•4/20/23, 10:30 PM

Another good read

b1mind•4/20/23, 10:30 PM

All of the Sass info I have saved* is pretty old too seems like xD

b1mind•4/20/23, 10:31 PM

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 >.>;

vinceOP•4/20/23, 10:32 PM

You gave me a lot of great resources, thanks b1! I'll read through all this and come back with my findings

vinceOP•4/20/23, 10:48 PM

Ah I see, I didn't know that. Whenever you use , it pretty much copies the selectors everywhere the class is

vinceOP•4/20/23, 10:48 PM

Which is why you use placeholders, so that doesn't happen

vinceOP•4/20/23, 10:59 PM

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

vinceOP•4/20/23, 11:01 PM

This can't be an s issue at this point. I even tried:

And it compiles to:

vinceOP•4/20/23, 11:08 PM

I made a minimal reproduceable example:

Sass:

Compiled css:

b1mind•4/20/23, 11:08 PM

looks correct

vinceOP•4/20/23, 11:09 PM

Shouldn't inherit properties?

b1mind•4/20/23, 11:09 PM

nope not how nesting works, you are still relying on inheritance at that point

b1mind•4/20/23, 11:10 PM

you would want like

vinceOP•4/20/23, 11:10 PM

Ah dang, I thought that's how it worked that whole time...

b1mind•4/20/23, 11:10 PM

that is why looking at the output is good

vinceOP•4/20/23, 11:11 PM

So I would have to explicitly s then?

This works:

b1mind•4/20/23, 11:12 PM