Inheritance 包括SCSS中的另一个类

我的SCSS文件中有以下内容：

.class-a{
显示：内联块；
//其他一些属性
&：悬停{
颜色：变深（10%）；
}  
}
.乙级{
//在这里继承a类
//一些性质
}

---

在class-b中，我希望继承

class-a

的所有属性和嵌套声明。这是怎么做到的？我尝试使用

@include class-a

，但编译时会出现错误。

看起来像

@mixin

，像这样的简单情况不需要

@include

我们可以这样做：

.myclass{
字体大小：粗体；
字体大小：90px；
}
.我的班级{
@扩展.myclass；
颜色：#000000；
}

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

---

您可以在此中看到@extend和@mixin之间的区别另一个选项可以使用属性选择器：

[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%);
  }
}

有关属性选择器的详细信息，请尝试以下操作：

使用公共属性创建占位符基类（%base class） 性质

使用此占位符扩展类（.my基类）

现在，您可以在任何类（例如my类）中扩展%基类

将Mixin与Extend结合使用 我刚刚偶然发现了Mixin和Extend的组合：

重复使用的块：

.block1{box shadow:0 5px 10px#000；}

.block2{box shadow:5px 0 10px#000；}

.block3{box shadow:0 0 1px#000；}

动态混合：

@mixin customExtend（$class）{@extend.{$class}；}

使用mixin： 比如：

@包括customExtend（block1）

h1{color:fff；@include customExtend（block2）；}

Sass将只将mixins内容编译到扩展块中，这使得它能够在不生成重复代码的情况下组合块。扩展逻辑仅将Mixin导入位置的类名放入block1。。。{box shadow:0 5px 10px#000；}
@extend可以正常工作，但如果其中任何一个类在一个指令（通常是媒体查询）内，则无法工作；除非它们都在同一个指令中。有关
@extend
，请参见此处了解一些有趣的事实-您应该注意一些棘手的副作用：Thank you@ToniLeigh，占位符很有趣，因为如果父选择器仅用于扩展（不在任何地方使用），它们可以省去生成额外的CSS选择器。像上面的例子一样，
.myclass
除了
.myotherclass
之外，其他任何地方都不使用（我想），那么最好将
.myclass
定义为
%myclass
，并在
中扩展。myotherclass
作为
@extend%myclass。它将生成
.myotherclass{font-weight:bold；font-size:90px；color:#000000；}
Vs@MartinAnsty，这太糟糕了。虽然这段代码可能会回答这个问题，但提供了关于为什么和/或如何回答这个问题的额外上下文，从而提高了它的长期价值。
@extend#{.my class'，'my other class'这里的hashbang是什么意思？@KonradViltersten这不是hashbang。这只是一个散列标记。只有F和Body的身份证@dev_willis hmm。。。我不理解F和Body的I。这是文字游戏还是我今天太慢了？sassmeister链接断了。@Yevgeny Afanasayev不，你不能直接扩展类，但可以直接扩展占位符。@Yevgeny Afanasayev直接扩展类（最流行的答案）对我不起作用，但是扩展一个占位符完成了这项工作。因此，我发布了答案，因为它不是相同的答案。感谢您发布了另一个答案，但您的答案不清楚我们为什么需要它。如果您可以添加更多的理由来阐明用例或这种方法的优点，我们将不胜感激。谢谢。如果该类在其他文件中，该如何处理？
@extend .myclass;
@extend #{'.my-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;
}