在SCSS中包含另一个类

Question

我在我的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,但这只是在编译时抛出错误.

Answer 1

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

人们可以这样做:

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

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

Answer 2

试试这个:

1. 使用公共属性创建占位符基类(%base-class)
2. 使用此占位符扩展您的类(.my-base-class).

3. 现在,您可以在任何类中扩展%base-class(例如.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;
   }
   

Answer 3

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

Answer 4

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

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

Answer 5

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

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