在SCSS中包括另一个类

309

我的SCSS文件中有这个：

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

.class-b{

 //Inherite class-a here

 //some properties
}

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

inheritance sass

— F21
source

623

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

一个可以做的：

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

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

— F21
source

40

@extend可以正常工作，但是如果两个类中的任何一个都在指令（通常是媒体查询）中，则不会工作；除非它们都在同一指令中。

— MartinAnsty 2013年

13

看到这里一些有趣的事实 @extend -有一些棘手的副作用，你应该知道的：stackoverflow.com/questions/30744625/...

— 托尼利

2

谢谢@ ToniLeigh，PlaceHolder很有趣，因为如果父选择器仅用于扩展（不在任何地方使用），它们可以节省额外的CSS选择器的生成。就像在上面的示例中一样，.myclass我没有在其他地方使用过（我想）.myotherclass，那么最好.myclass定义为as %myclass并扩展为.myotherclassas @extend %myclass;。它将生成为.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }

— Abhijeet

5

使用Place Holder Vs的示例使用普通类选择器的示例

— Abhijeet

@MartinAnsty好吧，那太糟了。

— 艾布拉姆

51

尝试这个：

创建具有通用属性的占位符基类（％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;
}

— 阿什温
source

我认为这个答案与最受欢迎的答案相同。我对吗？

— Yevgeniy Afanasyev '18 October

1

@Yevgeniy Afanasyev不，您不直接扩展一个类，但是可以直接扩展一个占位符。

— 阿什温

从来没有问过：(

— Yevgeniy Afanasyev

1

@Yevgeniy Afanasyev直接扩展该类（最受欢迎的答案）对我来说不起作用，但是扩展占位符可以完成该工作。因此，我发布了答案，因为答案不一样。

— Ashwin '18

3

感谢您发布替代答案，但是您的答案尚不清楚我们为什么需要它。如果您可以添加更多的理由来阐明这种方法的用例或优点，将不胜感激。谢谢。

— Yevgeniy Afanasyev

16

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

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

— 有里
source

sassmeister链接已断开。

— LexieHankins

11

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

— 麦克斯韦
source

22

尽管此代码可以回答问题，但提供有关此代码为何和/或如何回答问题的其他上下文，可以提高其长期价值。

— adiga

2

@extend #{'.my-class', '.my-other-class'};

— iarroyo

2

哈希爆炸在这里是什么意思？

— 康拉德·维特尔斯滕

7

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

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

— 汉治
source