为什么我的CSS被SCSS覆盖,而SCSS甚至没有包括在内

why my css is overriden by scss which is even not included(为什么我的CSS被SCSS覆盖,而SCSS甚至没有包括在内)

本文介绍了为什么我的CSS被SCSS覆盖,而SCSS甚至没有包括在内的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在处理物化CSS并使用该库https://materializecss.com/

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

当我检查元素时,我看到Chrome正在从我的html中仍未使用的.scss文件中获取css。

而我只包括两个css文件。

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

推荐答案

您正在追逐幽灵。问题不是不是SCSS,而是评论中指出的CSS Specificity。忽略该规则来自.scss文件这一事实,并将重点放在css特性上。

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

真正的问题:
但问题是,materialize.css样式正在生效,而您的styles.css样式没有生效,因为CSS Specificity。

注意,物化样式中的选择器为:

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

这些是特定的。它们只寻址li内的a元素,.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覆盖,而SCSS甚至没有包括在内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:为什么我的CSS被SCSS覆盖,而SCSS甚至没有包括在内

基础教程推荐