SCSS Nesting and extend

user_810351 0
Viewed 49

When I do a yarn build of the scss below I can only see the .select-list__item:hover in the compiled css, I am not seeing anything else from the class such as .select-list__item--selected I am not sure what the issue here is.

%select-list__item {   

&:hover {
    background: red;      
}

&--selected,
&--selected:nth-child(2n),
&--selected:hover {
    background: #00FF00;
 
}}


.select-list__item {
@extend %select-list__item;}
sass css
2 Answers

I believe it is to do with how placeholders (ie: %chosen-name) are meant to be used.

Although this is not explicitly pointed out in the documentation they are meant to be small bits that are reusable.

At my company, we use one for our generic button styles (margin, padding, font) and we extend that into all of our buttons (primary, secondary, tertiary).

A potential solution for your use case:

%select-list__item {   

    &:hover {
        background: red;      
    }
    
    &:focus{
        background: blue;
    }
    
}


.select-list__item {
    @extend %select-list__item;
    
    &--selected,
    &--selected:nth-child(2n),
    &--selected:hover {
        background: #00FF00;
    }
}

Or here's another - bit of an OTT solution for the example but you get the idea:


%select-list__item {   

    &:hover {
        background: red;      
    }
    
    &:focus{
        background: blue;
    }
    
}

%selected-list__item {
    background: #00FF00;
    &:nth-child(2n),
    &:hover {
        background: #00FF00;
    }
}

.select-list__item {
    @extend %select-list__item;
    
    &--selected {
        @extend %selected-list__item
    }
    
}
user_57448040

According to the documentation:

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.

A mixin would work in your situation:

@mixin select-list__item() {   
  &:hover {
    background: red;      
  }
    
  &--selected,
  &--selected:nth-child(2n),
  &--selected:hover {
    background: #00FF00; 
  }
}

.select-list__item {
  @include select-list__item;
}
user_97180560
Related