Sass 扩展 / CSS 覆盖一些属性

Question

我正在尝试创建一个小的自定义图标库以在我的网站上使用以下内容：

它适用于单个图标，但我不想为我要使用的每个图标编写它。 所以我尝试使用 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 开发工具中，我可以看到我使用的图像，但是因为这 2 个属性被覆盖，所以无法正确显示。 如果我使用@Mixin，它可以正常工作，但据我所知，最好尽可能使用@extend。

Answer 1

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

.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-] {
    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
}

通过使用[class^=icon-] ，将选择每个 html 元素，其中icon-以 icon- 开头。
这样，如果您的所有图标类名都以 icon- 开头，例如icon- icon-google ，您将不需要任何扩展。