将 Mixin 与 Extend 结合

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

试试这个：

使用common创建占位符基类（％base-class）特性
使用此占位符扩展您的类（.my-base-class）。

现在您可以在任何类中扩展％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是一个很好的解决方案，但要注意编译的css将打破类定义。任何扩展相同占位符的类都将组合在一起，并且未在类中扩展的规则将在单独的定义中。如果多个类被扩展，在编译的css或开发工具中查找选择器会变得不守规矩。 mixin将复制mixin代码并添加任何其他样式。

您可以在此sassmeister

中看到@extend和@mixin之间的区别

Answer 4

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

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

而每个班级都以＆＃34;你的班级名称＆＃34;开头。使用这种风格。

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

[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

上的属性选择器的更多信息

Answer 5

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

在SCSS中包含另一个类

6 个答案:

将 Mixin 与 Extend 结合

重用块：

动态混合：

使用混合：