在组件中扩展SCSS类

Question

好的，我已经在一些不同的指南和博客中阅读了有关此内容的信息，但我一直在努力寻找合适的解决方案。

假设我的主要styles.scss文件中包含以下类：

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

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

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

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

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

  background-color: blue;
}

现在，我想您可以将btn--with-image--google到元素中，并且一切就绪。 但是，这种方式不起作用。 我不能在不重新导入主要styles.scss文件的情况下扩展btn--with-images ，它不必要地复制了样式。

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

Answer 1

做一个混音

创建一个文件名为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()

希望这对您有所帮助，有关更多信息，请检查此 。