扩展组件

Question

好吧，我已经在几个不同的指南和博客中看到了这个，但我正在努力围绕一个适当的解决方案。

假设我的主styles.scss文件中有以下类：

.btn {
  padding: 5px;
  text-transform: uppercase;
}

.btn--with-image {
  @extends .btn;

  > img {
    padding-right: 5px;
    margin-left: -5px;
  }
}

现在说我有btn--with-image的特定实现，它对特定的角度组件是唯一的。对我来说，在myComponent.scss中嵌入css类是有意义的。让我们这样做并像这样创建：

.btn--with-image--google {
  @extends .btn--with-image;

  background-color: blue;
}

现在我认为你可以将btn--with-image--google添加到一个元素中，然后你就可以了。但是，它不起作用。我无法在不重新导入不必要地复制样式的主btn--with-images文件的情况下扩展styles.scss。

将修饰符类封装在组件中以最小化重复的正确方法是什么？

Answer 1

改为使用mixin

创建一个文件名mixins.scss

@mixin btn-with-image(){
.btn--with-image {
   padding: 5px;
   text-transform: uppercase;

  > img {
    padding-right: 5px;
    margin-left: -5px;
   }
  }
}

将其导入myComponent.scss

像这样称呼它

@include btn-with-image()

希望这对您有所帮助，更多信息请查看this。