所以我一直在尝试让 SASS 为一个项目工作，但由于某种原因嵌套不想为我工作？当我将 .header-menu 的片段移到嵌套之外时，它工作得很好，只是没有嵌套？这是index.html的代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Portfolio</title> <link rel="stylesheet" href="../stylesheets/scss/style.scss"> <script src="../Javascript/includeHTML.es6"></script></head><header> <div w3-include-html="../Elements/Header.html"></div> <script>includeHTML()</script></header><body class="homepage"><p>hallo dit is een test</p></body></html>这是头文件的代码：<!DOCTYPE html><html><head> <link rel="stylesheet" href="../stylesheets/scss/style.scss"></head><header><div class="header"> <h1>Pointbreak</h1> <div class="header-menu"> <ul> <li>Who am I?</li> <li>My work</li> <li>Contact</li> </ul> </div></div></header></html>这是 style.scss，请注意，“&-menu”和“.header-menu”都不起作用：.header { background-color: white; &-menu { background-color: red; } .header-menu { background-color: orange; }}.homepage { background-color: lightgray;}最后是编译后的 CSS 代码：.header { background-color: white;}.header-menu { background-color: red;}.header .header-menu { background-color: orange;}.homepage { background-color: lightgray;}/*# sourceMappingURL=style.css.map */我希望我提供了足够的信息，如果没有，请告诉我。
2 回答
叮当猫咪
TA贡献1776条经验 获得超12个赞
回答
因此，经过一夜好眠后，我找到了答案，你们在某种程度上都很好，这鼓励我去其他地方看看。
问题是我链接了错误的样式表，这是我在查看开发工具中的网络请求后才发现的。
在那里我看到它正在加载 style.scss 文件，而浏览器当然无法读取它。应该是CSS文件。
所以我更改了文件夹和文件：
<link rel="stylesheet" href="../stylesheets/scss/style.scss">到：
<link rel="stylesheet" href="../stylesheets/css/style.css">
交互式爱情
TA贡献1712条经验 获得超3个赞
&您可以在 的开头放置另一个&-menu以将其嵌套在其中.header。
.header {
background-color: white;
& &-menu {
background-color: red;
}
.header-menu {
background-color: orange;
}
}
编译后的CSS：
.header {
background-color: white;
}
.header .header-menu {
background-color: red;
}
.header .header-menu {
background-color: orange;
}
- 2 回答
- 0 关注
- 113 浏览
添加回答
举报
0/150
提交
取消