SASS Syntax

I have a piece of CSS code:

#content {
    grid-template-areas:
        "header header header header"
        "footer footer footer footer"
        "main main main main"
        "main main main main"
        "aside aside nav nav"
        "section section section section"
        "section section section section";
}

#content {
    grid-template-areas:
        "header header header header"
        "footer footer footer footer"
        "main main main main"
        "main main main main"
        "aside aside nav nav"
        "section section section section"
        "section section section section";
}

I have written the same code in SASS but it looks very un-organized & it's very hard to read:

#content
    grid-template-areas: "header header header header" "aside main main main" "nav main main main" "section section section section" "section section section section" "footer footer footer footer"

#content
    grid-template-areas: "header header header header" "aside main main main" "nav main main main" "section section section section" "section section section section" "footer footer footer footer"

How can I fix my SASS syntax and make it readable & more organized like my CSS code? Thanks!

KP-C

Kevin Powell - Community•4y ago

iLoveCoffee

SASS Syntax

I have a piece of CSS code:

#content {
    grid-template-areas:
        "header header header header"
        "footer footer footer footer"
        "main main main main"
        "main main main main"
        "aside aside nav nav"
        "section section section section"
        "section section section section";
}

#content {
    grid-template-areas:
        "header header header header"
        "footer footer footer footer"
        "main main main main"
        "main main main main"
        "aside aside nav nav"
        "section section section section"
        "section section section section";
}

I have written the same code in SASS but it looks very un-organized & it's very hard to read:

#content
    grid-template-areas: "header header header header" "aside main main main" "nav main main main" "section section section section" "section section section section" "footer footer footer footer"

#content
    grid-template-areas: "header header header header" "aside main main main" "nav main main main" "section section section section" "section section section section" "footer footer footer footer"

How can I fix my SASS syntax and make it readable & more organized like my CSS code? Thanks!

SASS Syntax

Similar Threads

SASS Syntax

Similar Threads

Similar Threads

Similar Threads