用 SASS 嵌套似乎对我不起作用？

用 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 */

我希望我提供了足够的信息，如果没有，请告诉我。

墨色风雨

浏览 124回答 2

2回答

叮当猫咪

回答因此，经过一夜好眠后，我找到了答案，你们在某种程度上都很好，这鼓励我去其他地方看看。问题是我链接了错误的样式表，这是我在查看开发工具中的网络请求后才发现的。在那里我看到它正在加载 style.scss 文件，而浏览器当然无法读取它。应该是CSS文件。所以我更改了文件夹和文件：<link rel="stylesheet" href="../stylesheets/scss/style.scss">到：<link rel="stylesheet" href="../stylesheets/css/style.css">

0

0

交互式爱情

&您可以在的开头放置另一个&-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;}

0

0

随时随地看视频慕课网APP

相关分类

Html5