Sass Nested Rules

February 7, 2021 12:07 pm IST

You are Here:

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; } }

Run

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; } }

Run

Applying Nested Rules for @media

Example

SASS TO CSS CONVERTER

body{ color: black; @media print{ color: red; } }

Run

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.