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 !important;
    background-color: unset !important;
  }
}

应该可以解决问题。您可以阅读更多关于 "unset" 的信息和 "!important" .