如何覆盖“最小错误”主题的主题默认值

Question

我正在使用 Minimal Mistakes Jekyll 主题开发一个托管在 GitHub 页面上的网站。我正在研究一些基本的定制 - 仍在努力学习 - 因此我从练习一些简单的主题更改开始。我首先阅读文档的Stylesheet部分。

在这里，我决定从本页列出的第一个示例开始，尝试覆盖

link-color

的主题默认值。然而我在这里遇到了一些麻烦。

我首先遵循本页上的建议大纲。我确保导航到网站存储库中的

main.scss

文件，然后在文件顶部添加行

link-color: red;

（确保将其添加到任何

@import

语句上方）。然而，添加此行后，似乎没有任何变化，网站的默认链接颜色仍然显示为浅蓝色。

不确定我在这里做错了什么。我在网上阅读了一些内容，其中提出了类似的问题，并提供了不同程度的建议/解决方案以及不同程度的复杂性。我对 Jekyll 主题非常陌生，只是尝试将其作为更复杂定制的良好入门。

有人知道我在这里可能做错了什么，或者有任何有用的示例、教程或资源的链接吗？

此外，这里是 GitHub 上的 Minimal Mistakes 存储库 和该存储库的 我的分叉版本 的链接。

Answer 1

您设置了一种颜色，它总是会被

$info-color

覆盖，因为

https://github.com/eolesinski/eolesinski.github.io/blob/master/_sass/_variables.scss

中缺少 !default 标志:

$info-color                 : #52adc8;
$link-color                 : $info-color;

来自css-tricks：

!default

是一个 Sass 标志，指示对变量进行条件赋值 — 仅当变量先前未定义或为 null 时才分配值。

解决方案：

在

!default

定义中的

$info-color

之后添加

$link-color

，以便能够覆盖主 css 文件顶部的

$link-color

。新条目：

$link-color: $info-color !default;

或者，直接在

_variables.scss

文件中更改链接颜色。

Visual Studio 代码中的默认颜色：

覆盖并结果：

有关主题如何工作的详细信息：

您的克隆版本与官方存储库不同。它也不支持皮肤。不确定还缺少什么。在任何情况下您都无法遵循文档。您可以更新到正式版。

原始存储库导入以下 sass 文件：

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials

这会产生以下导入顺序（跳过不相关的导入）：

1. 皮肤
2. 变量（@import“最小错误/变量”；）
3. 重置（@import“最小错误/重置”；）

_config.yml文件定义了一个皮肤（默认默认，不设置颜色）：

minimal_mistakes_skin: "default" 

其他skins（如skins/_air.scss）定义自己的链接颜色：

$link-color: #393e46 !default;

variable CSS 文件（_sass/minimal-mistakes/_variables.scss）使用 $info-color 定义默认链接颜色（如果之前没有手动或由皮肤覆盖）：

$link-color: mix(#000, $info-color, 20%) !default;

reset CSS 文件 (_sass/minimal-mistakes/_reset.scss) 定义链接应使用该变量：

a {
  color: $link-color;

Answer 2

网站主页 (

<a>

) 上的

about.md

元素具有内联样式

style="color:#4196ce"

。内联样式被认为是最高的 CSS 特异性，并且是始终用于样式表中找到的值的值。

• 注意：

  !important

  是此规则的一个例外，可以覆盖内联样式。
• 要了解更多信息，请参阅 MDN 的 CSS 特异性 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

如果您决定删除内联样式，则必须在首先定义

$link-color: red;

的行 @import "variables"; 后面添加

$link-color

after

。将自定义样式放在

@import "variables";

之前将导致从

$link-color

获取

_sass/_variables.scss

值。