How to override style in imported scss file

问题

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?

回答1:

@import "minima";

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

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

回答2:

setting the color to inherit will make it take it's parent element color which in this case looks to be white

回答3:

The answer that's marked correct is not the recommended way at all. In fact, it's a terrible way to override a style.

The correct way to do this:

@import "minima";

.highlight {
  &.err {
    color: unset;
    background-color: unset;
  }
}

HTML:

<div class="highlight err"></div>

来源：https://stackoverflow.com/questions/59013314/how-to-override-style-in-imported-scss-file

标签

html

css

Sass

Jekyll