scss的问题：某些样式未应用答案

【问题标题】：Problem with scss: some styles are not appliedscss的问题：某些样式未应用
【发布时间】：2019-10-04 01:40:01
【问题描述】：

我正在 YouTube 上的 DesignCourse 上做一个关于 SVG 剪辑路径 的教程，在我的 .scss 文件中我有很多样式，但第 38 行之后的样式甚至不适用当我检查他的代码时，我看到他的代码和我的一样，我不知道为什么这些样式不适用。我尝试切换到隐身模式并切换浏览器，但没有任何帮助 （我在 Visual Studio Code 和浏览器控制台中没有收到任何错误）。

这是该教程的链接：https://www.youtube.com/watch?v=x9_ULV1vjQE&list=WL&index=42

这是我的 .scss 文件：

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

body, html {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Nunito";
    background: #220954;
}

.wrapper {
    position: relative;
    overflow: hidden;

    nav {
        width: 20%;
        float: right;
        background-color: #5923c6;
        height: calc(100vh - 4em);
        font-size: 1.4em;
        line-height: 1.5em;
        color: white;
        padding: 2em;
        //clip-path: url("#clipPath");

        ul {
            list-style-type: none;
            padding: 0;

            a {
                text-decoration: none;
                display: block;
                padding: 1em 0;
                font-weight: bold;
                color: white;
            }


            p {
                color: red;
            }
        }
    }

    h1 {
        color: white;
        margin: 2em;
        font-size: 5em;
        position: absolute;
        top: 0;
        left: 0;
    }

    button {
        position: absolute;
        top: 0;
        right: 0;
        margin: 2em;
        font-size: 1.4em;
        background: none;
        border: 3px solid purple;
        color: white;
        padding: 1em;
        cursor: pointer;
        outline: none;

        &:hover {
            background: rgba(0, 0, 0, 01);
        }
    }
}

这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CLIPPY</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <button id="open">Open Nav</button>
    <div class="wrapper">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem recusandae aperiam est nulla veritatis magnam dolores, totam perspiciatis unde, mollitia vel exercitationem quas reprehenderit qui deserunt? Illum ipsam eveniet exercitationem?</p>
        </nav>
    </div>

    <h1>Bro, wooooooahh</h1>

</body>
</html>

【问题讨论】：

你的 sass 正好有 38 行。
在我的编辑器中显示它有 73 行长。我的括号错了吗？
那你没有复制你所有的sass
你必须向下滚动 sass 代码，因为还有更多
添加新样式后，你有没有把那个scss代码编译成css？

标签： html css sass

【解决方案1】：

您的问题不是很清楚，但我想您是在谈论您的 h1，并且未应用按钮样式。

您的 SCSS 将这些样式定义为 .wrapper 样式的子样式，这意味着它们被编译为 .wrapper h1 和 .wrapper button。这种类型的选择器需要将元素定义为 HTML 中包装器 div 的子元素。

在您的 HTML 中，这些元素不包含在包装 div 中，它们是它的兄弟。

您需要将 HTML 移到包装器 div 中，或者将 SCSS 定义移到 .wrapper 类之外。

由于错误，您关注的 youtube 视频包含误导性代码。在 7:09 可见的第 37 行有一个额外的大括号。这个额外的大括号导致他未来的样式看起来是 .wrapper 类的成员，但实际上不是。

【讨论】：