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

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

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

//整页样式-在何处编写此部分

.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文件中添加顶部部分，它就会工作。后来我意识到，我必须以某种方式连接其余的样式才能真正实现这一点，但我不知道怎么做？

将整个内容粘贴到您的样式中。sass中允许scss嵌套，如果这让您感到困惑的话。请查看我制作的示例StackBlitz模板。如果我能提供更多帮助，请告诉我。@k0hamed我也试过了。但它不起作用。很抱歉，我忘了提那件事。而且，这不是最佳实践，对吗？它怎么不起作用？我所说的整件事是指

//FULL PAGE STYLE

下的整件事，最好的做法是这样做，在标题组件样式中有

.header container

块，在主体组件中有

.body container

块……等等。我假设您在询问有关

//整版样式

的问题时这样做了。您是否可以编辑该问题以将您的项目结构包含在stackblitz示例中？将整个内容粘贴到您的样式中。如果您对此感到困惑，请查看我制作的stackblitz示例模板。如果我能提供更多帮助，请告诉我。@k0hamed我也试过了。但它不起作用。很抱歉，我忘了提那件事。而且，这不是最佳实践，对吗？它怎么不起作用？我所说的整件事是指

//FULL PAGE STYLE

下的整件事，最好的做法是这样做，在标题组件样式中有

.header container

块，在主体组件中有

.body container

块……等等。我假设您在询问有关

//完整页面样式的问题时这样做了，您是否可以编辑该问题以将您的项目结构包含在stackblitz示例中？