包括SCSS中的另一个类

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

339607 次浏览
小开
最佳答案

看起来@mixin和@include对于这样的简单情况是不需要的。

你可以这样做:

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


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

使用@extend是一个很好的解决方案，但请注意，编译后的css将破坏类定义。任何扩展相同占位符的类都将被分组在一起，类中未扩展的规则将在单独的定义中。如果扩展了几个类，在编译的css或开发工具中查找选择器就会变得难以控制。而mixin将复制mixin代码并添加任何额外的样式。

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

小开

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

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

小开

这将包括.someclass中的所有规则

.myclass {
@extend .someclass;
}
小开

试试这个:

  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;
}
小开

结合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内容编译到扩展块中，这使得它能够在不生成重复代码的情况下组合块。扩展逻辑只把Mixin导入位置的类名放在block1中，…,……{box-shadow: 0 5px 10px #000;}


提交答案