Remove !important from property value, possible?

[naumanjkhan]

Consider following two classes

.foo {
  color: red !important;
}
.bar {
  color: blue !important;
}
.biz {
  @extend .foo;
}

it will output something like this

.foo, .biz {
  color: red !important;
}
.bar {
  color: blue !important;
}

i want some mechanism to remove !important from the extending class

.foo {
  color: red !important;
}
.bar {
  color: blue !important;
}
.biz {
  color: red;
}

[nex3]

No, there is no way to do this. @extend always re-uses the same CSS as the original selector, by design. The goal is to style your HTML the same way it would be styled if you manually wrote class="biz foo" instead of class="biz".