时间戳

首页 > 解决方案 > 用 SASS 嵌套似乎对我不起作用？

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

问题描述

所以我一直试图让 SASS 为一个项目工作，但由于某种原因，嵌套不想为我工作？

当我将 .header-menu 的片段移到嵌套之外时，它可以正常工作，只是没有嵌套？

这是 index.html 的代码：

<!DOCTYPE html>
<html lang="en">
<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 lang="en">

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

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

迪奥库拉

编辑 特此我提供我的 chrome webdev 工具网络选项卡的图像： 网络开发网络

我使用的 SASS 版本是：1.25.0，NPM 的版本是：6.13.0

标签： htmlcsssass

解决方案

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

推荐阅读