如何覆盖导入的 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 { ???? }
}

这使得添加样式变得容易，扩展具有新属性的样式，并且覆盖变得容易 样式的特定属性（因为我猜第二次提到的优先），但是我如何 "delete" 样式或元素？

Answer 1

@import "minima";

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

应该可以解决问题。您可以阅读有关 "unset" and "!important".

的更多信息

Answer 2

将颜色设置为 inherit 将使其采用父元素颜色，在本例中看起来是白色

Answer 3

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

正确的做法：

@import "minima";

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

HTML:

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

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

How to override style in imported scss file

html

css

sass

jekyll