CODEWITHSUNDEEP
htmlcsssassjekyll
BeeOnRope
BeeOnRope

Reputation: 64925

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?

Upvotes: 2

Views: 6241

Answers (3)

Riyaadh Fakier
Riyaadh Fakier

Reputation: 66

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>

Upvotes: 4

Gaben
Gaben

Reputation: 374

@import "minima";

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

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

Upvotes: 1

HolyMoly
HolyMoly

Reputation: 2080

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

Upvotes: 1

Related Questions