在SCSS中包括另一个类

继承 CSS

MandyLEYHarry

2020-03-17

我的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，但是在编译时只会抛出错误。

第1926篇《在SCSS中包括另一个类》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
樱古一 2020.03.17

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

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

神无梅Eva 2020.03.17

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

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

米亚Green 2020.03.17

尝试这个：

  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;
}
Gil启人 2020.03.17

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

一个可以做的：

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android