包括SCSS中的另一个class级

我在我的SCSS文件中有这个：

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

在b类中，我想inheritanceclass-a的所有属性和嵌套声明。 这是怎么做的？ 我试过使用@include class-a ，但编译时只会引发错误。

Answer 1

看起来像@mixin和@include这样的简单情况下不需要。

人们可以这样做：

 .myclass { font-weight: bold; font-size: 90px; } .myotherclass { @extend .myclass; color: #000000; } 

Answer 2

使用@extend是一个很好的解决scheme，但要注意编译后的css会分解类定义。 任何扩展相同占位符的类都将被组合在一起，而在该类中未被扩展的规则将被单独定义。 如果扩展了几个类，那么在编译的css或开发工具中查找select器会变得不稳定。 而mixin将复制mixin代码并添加任何其他样式。

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

Answer 3

另一种select可能是使用属性select器：

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

而每个以“你的class级名称”开头的class级都使用这种风格。

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

 [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的属性select器