How to override style in imported scss file

Question

My Jekyll blog's theme has a scss file with the following syntax related style in minima.scss:

.highlight {
  background: #fff;
  @extend %vertical-rhythm;

  .highlighter-rouge & {
    background: #eef;
  }

  .err   { color: #a61717; background-color: #e3d2d2 } // Error

// more stuff

I want to override the nested .highlight -> .err style only, but I don't want to set the color and bg-color attributes to anything specific, just the default. As in, I want it as if the .err style had never been defined in the first place.

I consume the minima.scss file in a main.scss which (which is the the actual file included in the page), like so:

@import "minima";

.highlight {
    .err { ???? }
}

This makes it easy to add styles, easy to extend styles with new attributes, and easy to override specific attributes of styles (since I guess the second mention takes priority), but how do I "delete" style or elements?

Answer 1

@import "minima";

.highlight {
  .err {
    color: unset !important;
    background-color: unset !important;
  }
}

Should do the trick. You can read more about "unset" and "!important".