Html Sass extend/CSS覆盖某些属性

我正在尝试创建一个小型自定义图标库，用于我的网站，如下所示：

它适用于单个图标，但我不想为我将要使用的每个图标编写它。 因此，我尝试使用SASS/SCSS做一些更简单的事情：

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

它会生成以下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");
}

它不起作用，背景大小和背景重复值被覆盖，我不知道是什么，但它们不适用，我可以看到我用来插入图标的i元素，在thd开发工具中，我可以看到我使用的图像，但因为这两个属性被覆盖，所以无法正确显示。

---

如果我使用@Mixin，效果很好，但据我所知，最好在我可以的时候使用@extend。

您的代码片段中有几个问题：

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

• 您的扩展应该是

  @extend.icon

  ，请参阅“”

• 您正在使用

  background:url（'../icons/icon.png'）

  ，而您应该使用

  background-image:url（'../icons/icon.png'）

background

是一种速记，它意味着它是一种为多个属性提供值的方法。（例如：背景图像、背景大小、背景位置、背景颜色等）。那一行正在改写你以前的规则

要避免使用

@extend

，您可以采用不同的方法：

CSS[属性^=值]选择器 通过使用

[class^=icon-]

，将选择以

icon-

开头的类的每个html元素。
这样，如果所有图标类名称都以

图标-

开头，比如

图标google

，则不需要任何扩展

[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
}