Sass extend / CSS overwrite some properties

Question

I am trying to create a small custom icon libary to use with my website following this:

It works for single icon but I don't want to write it for every icon i am going to use. So I tried to use SASS / SCSS to do something easier:

 .icon {
    height: 4.5rem;
    width: 4.5rem;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.google-icon {
    background: url('../icons/icon.png');
    @extend icon;
}

and it generate this CSS:

.icon, .google-icon {
  height: 4.5rem;
  width: 4.5rem;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}

.google-icon {
  background: url("../icons/icon.png");
}

And it doesn't work, the background-size and background-repeat values are being overwriten, i don't know by what, but they don't apply, I can see the i element i've been using to insert the icon, and in thd dev tools i can see the image that I used but because this 2 properties being overwritten it doesn't show properly. If I use @Mixin it works fine but from what I heard it's better to use @extend when I can.

score 0 · Answer 1 · answered Apr 26 '21 at 09:06

Few issues in your snippet:

.google-icon {
    background: url('../icons/icon.png');
    @extend icon;
}

Your extend should be @extend .icon, see the "." ?
You are using background: url('../icons/icon.png'), when you should use background-image: url('../icons/icon.png').

background is a shorthand, it means that it's a way to provide a value for multiple properties. (e.g.: background-image, background-size, background-position, background-color, etc...). That line is overwritting your former rules.

To avoid the use of @extend you could follow a different methods:

CSS [attribute^=value] Selector

[class^=icon-] {
    height: 4.5rem;
    width: 4.5rem;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-google { // The classname will start with icon-
    background-image: url('../icons/icon.png'); // background-image instead of background
}

By using [class^=icon-], every html element with a class starting with icon- will be selected.
This way, if all your icons classname are starting with icon-, like icon-google, you won't need any extend.

Sass extend / CSS overwrite some properties

1 Answers1

CSS [attribute^=value] Selector