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

问题描述

问 题

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    

解决方案

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

这篇关于应该怎么写sass，我写的sass该怎么修改简洁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！