Sass Nested Rules

Last Updated:

Sass Nested Rules

Rather than repeating the same selectors over and over again, you can write one style rules inside another. Sass will automatically combine the outer rule's selector with the inner rule's.

Sass Nested Rules is a backbone of sass.

The following example will demonstrate how to apply Sass nested rules.

Example

SASS TO CSS CONVERTER
h2{ font-size: 30px; span{ color: red; } }

Syntax

parentSelector { // css code childSelector { // css code } }

Applying Nested Rules for List

Example

SASS TO CSS CONVERTER
ul{ margin: 0; li{ list-style-type: circle; } }

Applying Nested Rules for @media

Example

SASS TO CSS CONVERTER
body{ color: black; @media print{ color: red; } }

Tips

The deeper you nest, the more bandwidth it takes to serve your CSS and the more work it takes the browser to render it. So, it is recommended to keep those selectors shallow whenever possible.

Share this Page

Meet the Author