为什么我的 css 被 scss 覆盖，甚至不包括在内

Question

我正在研究具体化 css 并使用这个库 https://materializecss.com/

我编译 sass 并将 css 文件包含在我的 html 中，但是当我尝试做一些自定义 css 时，我发现了奇怪的事情。

当我检查元素时，我看到 chrome 正在从 .scss 文件中获取 css，我仍然没有在我的 html.[=14= 中使用这些文件]

而我只包括两个 css 个文件。

<link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css"/>

Answer 1

你在追鬼。问题是不是 SCSS，而是与评论中指出的CSS Specificity有关。忽略规则来自 .scss 个文件这一事实，并关注 CSS 特异性。

为什么在检查器中看到 .scss 文件：
您包含的 materialize.css 文件包括对实体化 SCSS 文件的引用（称为 "source map"）（如果您查看materialize.css 文件，您将看到文件底部列出的 sourcemap 参考）。由于该源映射，当您在浏览器的开发人员控制台中检查项目时，它实际上会向您显示正在应用样式的 SCSS 行。这是一件好事，如果你自己在 SCSS 中开发，你会非常感激它。

真正的问题：
然而，关键是 materialize.css 样式正在生效，而您的 styles.css 样式 没有生效 ，因为 CSS Specificity。

注意在具体化样式中选择器是：

.side-nav .collapsible-body li a, .side-nav .nav.fixed .collapsible-body li a { ...

这些是特定的。它们只寻址 li、.collapsible-body、.side-nav 中的 a 个元素（在第二个选择器中，当然还有额外的 .nav.fixed元素）。

在你的样式中，你的填充被忽略了，因为它包含一个更通用的（又名不太具体）选择器：

.collapsible-body li a { ...

这不具体。它通常寻址 .collapsible-body 中 li 中的任何 a 元素。这些不会覆盖更具体设置的样式，例如您试图覆盖的具体化填充样式。

如果您希望自己的样式覆盖 materialize 样式，则需要使用 至少与 一样具体的样式。例如：

.side-nav .collapsible-body li a,
.side-nav .nav.fixed .collapsible-body li a {
    padding-left: 50px;
    font-weight: 400;
}

希望这对您有所帮助。如果您打算继续使用 materialize、bootstrap 或任何其他框架，您真的会从阅读一些关于 CSS 特异性的文章中受益。

为什么我的 css 被 scss 覆盖，甚至不包括在内

why my css is overriden by scss which is even not included

css

materialize