angular - 我第一次使用 html 和 sass 制作了一个网页。但是我对如何在我的角度项目中编写嵌套的 sass 代码感到困惑

Question

我无法决定如何在我的 Angular 项目中传输我的 sass 代码，因为它们是嵌套的。

我的网页中有 3 个部分。页眉、正文和页脚。sass 代码是嵌套的，现在我无法决定如何在我的角度项目中移动/使用这些代码。

// FULL PAGE STYLE - 在哪里写这个部分？

.full-page-container{
height: 100%;
display: flex;
flex-direction: column;

.sub-container{
    display: flex;
    flex-direction: column;
}

// MAIN HEADER STYLE - Wrote this in the header component sass file

.header-container{
    // background-color: yellowgreen;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    #site-logo{
        margin-left: 2%;
        margin-top: 1%; 
    }

    #right-header-buttons{
        margin: auto 15px;
    }

    a{
        text-transform: uppercase;
        color: black;
    }
}

// MAIN BODY STYLE - Wrote this in the body component sass file

.body-container{
    flex: 1;
    display: flex;
    width: 40%;
    justify-content: center;
    margin: auto;

    form h2{
        font-weight: 500;
        margin-bottom: 0;
    }
    #input-search-bar{
        display: flex;
        width: 100%;
        border: 1px solid #ddd;
    }

    #input-search-bar input{
        padding: 5px;
        flex: 1;
        position: relative;
        font-size: 20px;
        border: none;
        outline: none;
    }

    i{
        padding: 5px;
    }

    form  p{
        margin-top: 5px;
        display: flex;
        justify-content: center;
    }

}

// MAIN FOOTER STYLE - Wrote this in the footer component sass file

.footer-container{
    // background-color: yellowgreen;

    .main-footer-elements {
        padding: 1.5%;

        a{
            margin-left: 15px;
        }

        #copyright-info{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }    
}

}

最初，我想如果我在 style.scss 文件中添加顶部部分，它会起作用。后来我意识到我必须以某种方式连接剩余的样式才能真正完成这项工作，但我不知道如何？

标签： angularsass