【问题标题】：Including another class in SCSS在 SCSS 中包含另一个类
【发布时间】：2012-03-22 13:01:15
【问题描述】：

我的 SCSS 文件中有这个：

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

在class-b中，我想继承class-a的所有属性和嵌套声明。这是怎么做到的？我尝试使用@include class-a，但这只是在编译时抛出错误。

【问题讨论】：

类在其他文件怎么办？

标签： inheritance sass

【解决方案1】：

对于像这样的简单案例，似乎不需要 @mixin 和 @include。

一个人可以做到：

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

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

【讨论】：

@extend 可以正常工作，但如果任何一个类在指令中（通常是媒体查询），则不会工作；除非它们都在同一个指令中。
请参阅此处了解有关 @extend 的一些有趣事实 - 您应该注意一些棘手的副作用：stackoverflow.com/questions/30744625/…
谢谢@ToniLeigh，PlaceHolder 很有趣，因为如果父选择器仅用于扩展（不在任何地方使用），它们可以节省附加 CSS 选择器的生成。就像上面的例子一样，.myclass 除了.myotherclass 之外的任何其他地方（我想）都没有使用，那么最好将.myclass 定义为%myclass 并在.myotherclass 中扩展为@extend %myclass;。它将生成为.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
Example of using Place Holder 与 Example of using normal class selector
@MartinAnsty 好吧，这很糟糕。

【解决方案2】：

试试这个：

创建一个占位符基类 (%base-class) 属性
使用此占位符扩展您的课程 (.my-base-class)。

现在您可以在任何类（例如 .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;
}

【讨论】：

@Yevgeniy Afanasyev 不，你不能直接扩展一个类，但是你可以直接扩展一个占位符。
@Yevgeniy Afanasyev 直接扩展课程（最流行的答案）对我不起作用，但扩展占位符可以。因此我发布了答案，因为它不是相同的答案。
感谢您发布替代答案，但从您的回答中不清楚我们为什么需要它。如果您可以添加更多推理来阐明这种方法的用例或优势，我们将不胜感激。谢谢。

【解决方案3】：

@extend .myclass;
@extend #{'.my-class'};

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
@extend #{'.my-class', '.my-other-class'};
这里的hashbang是什么意思？
@KonradViltersten 这不是一个 hashbang。这只是一个哈希标记。只是 F andbody 的我。
@dev_willis 嗯...我不明白 只是 F 和身体的我。是文字游戏还是我今天慢了？

【解决方案4】：

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

你可以在这个sassmeister看到@extend和@mixin的区别

【讨论】：

sassmeister 链接已损坏。

【解决方案5】：

另一个选项可能是使用属性选择器：

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

而以“your-class-name”开头的每个类都使用这种样式。

所以在你的情况下，你可以这样做：

[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 上有关属性选择器的更多信息

【讨论】：

【解决方案6】：

将 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}; }

使用混合：

点赞：@include customExtend(block1);

h1 {color: fff; @include customExtend(block2);}

Sass 只会将 mixins 内容编译到扩展块中，这使得它能够在不生成重复代码的情况下组合块。 Extend 逻辑只将 Mixin 导入位置的类名放在 block1, ..., ... {box-shadow: 0 5px 10px #000;}

【讨论】：