应该怎么写sass，我写的sass该怎么修改简洁？

Question

body

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
font-size: 20px
color: #666
background-color: #888

main

margin: 80px auto 0 auto
padding: 0px 50px

header
    display: flex
    flex-direction: row
    flex-wrap: wrap
    justify-content: space-around
    align-content: space-around
    align-items: flex-end
    padding: 50px 30px
    color: #fff
    background-color: #aaa

    .intro-text
        width: 610px
        max-width: 675px
        margin-bottom: 30px

        .star-bright
            margin: 40px auto 30px
            padding: 0
            max-width: 512px
            border: 0
            border-top: solid 5px
            text-align: center

    img
        border-radius: 50%
        width: 250px
        height: 250px
        max-width: 80%
        margin-top: 30px
        margin-bottom: 10px

section
    padding: 40px 0
    background-color: #eee

    h2
        text-align: center

    .star-dark
        margin: 40px auto 30px
        padding: 0
        max-width: 512px
        border: 0
        border-top: solid 5px
        text-align: center
        border-color: #888

    .grid
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-around
        align-content: space-around
        align-items: flex-end
        max-width: 90%
        list-style: none
        margin: 20px auto

        li
            margin: 20px
            max-width: 600px

        @media (min-width: 1023px)
        li
            max-width: 420px

            img
                max-width: 100%
                height: auto
                display: block

    hr
        border-color: #888

#contact

    h2
        text-align: center

    .star-dark
        margin: 40px auto 30px
        padding: 0
        max-width: 512px
        border: 0
        border-top: solid 5px
        text-align: center
        border-color: #888

    >div
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-around
        align-content: space-around
        align-items: flex-start

        form
            width: 80%

            .form-item
                position: relative
                margin-bottom: 10px
                padding-bottom: 10px
                border-bottom: 1px solid #bbb

                label
                    display: block
                    z-index: 0
                    position: relative
                    top: 2em
                    margin: 0
                    font-size: .85em
                    line-height: 1.764705882em
                    vertical-align: middle
                    vertical-align: baseline
                    opacity: 0
                    -webkit-transition: top .3s ease,opacity .3s ease
                    transition: top .3s ease,opacity .3s ease

                input
                    z-index: 1
                    position: relative
                    padding-right: 0
                    padding-left: 0
                    border: 0
                    border-radius: 0
                    font-size: 1.5em
                    background: 0 0
                    box-shadow: none!important
                    resize: none
                    width: 100%

                textarea
                    z-index: 1
                    position: relative
                    padding-right: 0
                    padding-left: 0
                    border: 0
                    border-radius: 0
                    font-size: 1.5em
                    background: 0 0
                    box-shadow: none!important
                    resize: none
                    width: 100%

        @media (min-width: 1023px)
            form
                width: 40%
                margin-left: 20px

        >div
            width: 80%

            p
                margin: 60px auto 0
                max-width: 700px

        @media (min-width: 1023px)
            >div
                max-width: 38%

                p
                    margin-top: 35px

                p:last-child
                    margin-top: 270px

footer

background-color: #000
color: #fff
text-align: left

.footer-above
    display: flex
    flex-direction: row
    flex-wrap: wrap
    justify-content: space-around
    align-content: space-around
    align-items: flex-start

div ul
    list-style: none

.footer-below
    text-align: center    

Answer 1

有几个建议，
第一，不应该使用标签选择器，id选择器，
第二，层级最好不要超过三层，
第三，配合css module来模块化你的css代码，
第四，属性名排序问题，最简单的按字母顺序排序，或者也可以按属性类别来排序，最好不要无序，这样会导致的问题有当属性多了，会可能出现重复属性。

Answer 2

我也有几个建议，
第一，利用好sass里的变量，将一些通用属性进行提取，方便维护；
第二，利用好模块化，将sass文件进行分类。首先是提取公共样式，比如section、button之类的，然后如果页面不多但是每个页面差异性较大可以按照页面进行css文件的分别管理，如果页面多但是有很多样式共用的模块，可根据功能进行模块化，另外，一些nav、footer等也可单独sass文件管理。如果页面有许多css动画，也可将动画文件单独管理。当你出现有两处css一模一样时就该考虑提取了。
第三，媒体查询，我个人想法是就近原则，即就近每个模块section，这样方便对比管理。