如何覆盖导入的 scss 文件中的样式

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" .

Answer 2

将颜色设置为inherit将使其采用它的父元素颜色，在这种情况下看起来是白色

Answer 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>