用 SASS 嵌套似乎对我不起作用？
所以我一直在尝试让 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回答
-
叮当猫咪
回答因此，经过一夜好眠后，我找到了答案，你们在某种程度上都很好，这鼓励我去其他地方看看。问题是我链接了错误的样式表，这是我在查看开发工具中的网络请求后才发现的。在那里我看到它正在加载 style.scss 文件，而浏览器当然无法读取它。应该是CSS文件。所以我更改了文件夹和文件：<link rel="stylesheet" href="../stylesheets/scss/style.scss">到：<link rel="stylesheet" href="../stylesheets/css/style.css"> -
交互式爱情
&您可以在 的开头放置另一个&-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;}
随时随地看视频慕课网APP
相关分类
Html5