DEV Community

Nesting in SASS

Sarah Chima on November 10, 2017

Remember nesting in HTML? The thing we do all the time when we put a <p> in a <div> and a <span> in the <p> like this? ...

Read full post

Lynne Finnigan • Nov 13 '17 • Edited

Great article! Another use for the ampersand that people might find useful would be to reference parent selectors with the ampersand at the end.

h1 {
    .parent-selector & {
        *insert styles*
    }
}

Very powerful!

Sarah Chima • Nov 14 '17

Awesome!!! Thanks for sharing this Lynne.

aurel kurtula • Nov 11 '17 • Edited

Great tutorial. A fantastic tip on this:

   .sidebar {
       position: fixed;
       height: 100%;

       &-list {
           background-color: white;

           &-link {
               text-decoration: none;
            }
        }
    }

Never thought about doing that.

Sarah Chima • Nov 11 '17

Thank you😊

Maksim Ivanov • Nov 25 '17 • Edited

Great tutorial, I like that you've also made a caution about the excessive nesting.

In my work I avoid styling elements by #id's. Usually I use them only as anchors.

Also a quick note about naming. For example you've used .sidebar-list-link.

I prefer to avoid this kind of "nesting" in naming as well and use only one level of nesting. So I would do .sidebar and .sidebar-list. And .list maybe with .for-sidebar modifier with .list-link. Basically I would follow a bit modified version of BEM methodology.

Sarah Chima • Nov 26 '17

Thanks for the addition. 😊😊

rhymes • Nov 11 '17

Well explained.

Just an addition: I've been using stylelint and stylelint-config-sass-guidelines to keep my SASS files in check and you can also configure it to set a maximum nesting depth.