SASS – Lesson 1 : Nesting Rules

Nesting rules is the main feature of SASS. Thanks to it, writing your CSS code is much faster, simpler, and more understandable based on the DRY (Don’t Repeat Yourself) principle.

Rule nesting example with a link color and its hover and focus states :

Compiled CSS :

Nesting will help you have a clean, logical, and well-organized code, which should be easier to maintain over time.

Of course, it’s possible to use nesting in any case. Example with media queries : Example with media queries :

Compiled CSS :