我在我的SCSS文件中有这个:
.class-a{
display: inline-block;
//some other properties
&:hover{
color: darken(#FFFFFF, 10%);
}
}
.class-b{
//Inherite class-a here
//some properties
}
在类b中，我想继承类a的所有属性和嵌套声明。这是怎么做到的?我尝试使用@include class-a，但这只是在编译时抛出错误。
看起来@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
试试这个:
创建一个占位符基类(%base-class) 属性 用这个占位符扩展你的类(.my-base-class)。 现在您可以在任何类中扩展%base-class(例如.my-class)。 %基类{ 宽度:80%; margin-left: 10%; margin-right: 10%; ｝ .my-base-class { @extend %基类; ｝ .my-class { @extend %基类; margin-bottom: 40像素; ｝
结合Mixin和Extend
我只是偶然发现了Mixin和Extend的组合:
重用:
.block1 {box-shadow: 0 5px 10px #000;｝
.block2 {box-shadow: 5px 0 10px #000;｝
.block3 {box-shadow: 00 1px #000;｝
动态混合:
@mixin customExtend($class){@extend .#{$class};｝
使用混合:
比如:@include customExtend(block1);
H1{颜色:fff;@include customExtend (block2);}
Sass将只将mixins内容编译到扩展块中，这使得它能够在不生成重复代码的情况下组合块。扩展逻辑只把Mixin导入位置的类名放在block1中，…,……{box-shadow: 0 5px 10px #000;}
