Sass 扩展 / CSS 覆盖一些属性

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.

Answer 1

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. ( eg: 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.