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

Question

我的 Jekyll 博客的主题在 minima.scss 中有一个 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 样式从来没有被定义过一样。

我使用 main.scss 中的 minima.scss 文件(这是页面中包含的实际文件)，如下所示:

@import "minima";

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

这使得添加样式变得容易，使用新属性轻松扩展样式以及覆盖样式的特定属性(因为我想第二个提到的优先)，但是如何“删除”样式或元素？

Answer 1

标记为正确的答案根本不是推荐的方法。事实上，这是一种重写样式的糟糕方法。

正确的做法是:

@import "minima";

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

HTML:

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