Sass 扩展/CSS 覆盖一些属性

Question

我正在尝试创建一个小型自定义图标库，以便与我的网站一起使用，如下this：

它适用于单个图标，但我不想为我要使用的每个图标编写它。 所以我尝试使用 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。

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-]

，每个以

icon-

开头的类的 html 元素都会被选中。
这样，如果您所有的图标类名都以

icon-

开头，例如

icon-google

，您将不需要任何扩展。

Answer 2

老派风格代码

.icon {
    height: 4.5rem;
    width: 4.5rem;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}
    
.google-icon {
    background-image: url("../icons/icon.png");
}

HTML代码

<span class="icon google-icon"></span>