扩展一个scss类并保持除add之外的所有内容不变!

rpppsulh  于 2023-02-10  发布在  其他
关注(0)|答案(1)|浏览(163)

如果我在一个.scss文件中有这个类:

.aClass {
    min-height: 500px;
    // ... more css properties
}

我想创建另一个继承自aClass的类,并使fields!变得重要。我知道我可以这样继承:

.bClass {
    @extend .aClass
}

但是,如何使.aClass中的字段在.bClass中标记为!important

ozxc1zmp

ozxc1zmp1#

你应该可以通过在Sass中使用一个带有@each循环的mixin来实现这一点。

@mixin myMixin($str){
  $prop : (
    color:red,
    border:1px solid red,
    position:relative
  );
  @each $key, $value in $prop {
    #{$key}: #{$value} #{$str};
  }
}
.test-a {
    @include myMixin(!important);
}
.test-b {
  @include myMixin('');
}

在本例中,我将!important作为mixin中的#{$str},这使得.test-a!important应用于所有属性,并将空字符串添加到.test-b以确保不添加!important

相关问题