Question

我的Jekyll博客主题包含一个{s {1}}中具有以下语法相关样式的scss文件：

minima.scss

我只想覆盖嵌套的.highlight { background: #fff; @extend %vertical-rhythm; .highlighter-rouge & { background: #eef; } .err { color: #a61717; background-color: #e3d2d2 } // Error // more stuff样式，但是我不想将color和bg-color属性设置为任何特定的值，只是默认值。就像我一样，我想好像从来没有首先定义过.highlight -> .err样式。

我在.err中消耗了minima.scss文件（它是页面中包含的实际文件），就像这样：

main.scss

这可以轻松地添加样式，轻松地扩展具有新属性的样式，以及轻松地覆盖样式的特定属性（因为我想第二个提要优先），但是如何“删除”样式或元素？

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>

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

3 个答案: