如何覆蓋導入的 scss 文件中的樣式

Question

我的哲基爾博客的主題有以下語法相關風格SCSS文件minima.scss ：

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

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

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

// more stuff

我只想覆蓋嵌套的.highlight -> .err樣式，但我不想將 color 和 bg-color 屬性設置為任何特定的東西，只是默認值。 就像在，我希望它好像.err風格從來沒有被定義過一樣。

我消耗minima.scss在文件main.scss它（這是包含在頁面中的實際文件），像這樣：

@import "minima";

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

這使得添加樣式、使用新屬性輕松擴展樣式以及覆蓋樣式的特定屬性變得容易（因為我猜第二個提到的優先），但是我如何“刪除”樣式或元素呢？

Answer 1

@import "minima";

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

應該做的伎倆。 你可以閱讀更多關於"unset"和"!important" 的信息。

Answer 2

將顏色設置為inherit將使其采用它的父元素顏色，在這種情況下看起來是白色

Answer 3

標記為正確的答案根本不是推薦的方法。 事實上，這是一種覆蓋樣式的糟糕方法。

執行此操作的正確方法：

@import "minima";

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

HTML：

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