在SCSS中包括另一个类

另一种选择是使用属性选择器：

[class^="your-class-name"]{
  //your style here
}

每个以“您的班级名称”开头的班级都使用这种样式。

因此，就您而言，您可以这样做：

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

有关w3Schools上的属性选择器的更多信息

使用@extend是一个很好的解决方案，但是请注意，已编译的CSS将破坏类定义。任何扩展相同占位符的类都将被分组在一起，而未在类中扩展的规则将在单独的定义中。如果扩展了几个类，则在已编译的CSS或dev工具中查找选择器可能变得不规则。而mixin将复制mixin代码并添加任何其他样式。

您可以在此sassmeister中看到@extend和@mixin之间的区别

尝试这个：

1. 创建具有通用属性的占位符基类（％base-class）
2. 使用此占位符扩展您的类（.my-base-class）。

3. 现在，您可以在任何类（例如.my-class）中扩展％base-class。

   %base-class {
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
   }
   
   .my-base-class {
       @extend %base-class;
   }
   
   .my-class {
       @extend %base-class;
       margin-bottom: 40px;
   }
   

貌似@mixin并@include没有需要一个简单的例子是这样的。

一个可以做的：

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}