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 :

$link_color: #ce649b;
$color_hover: darken($link_color, 20%); // fonction SASS qui assombrit la couleur
$color_focus: lighten($link_color, 10%); // fonction SASS qui éclaircit la couleur

// & : représente l'élément parent

a {
     color: $link_color;
     &:hover {
         color: $color_hover;
     }
     &:focus {
         color: $color_focus;
     }
}

Compiled CSS :

.ice-blog a {
  color: #ce649b;
}
.ice-blog a:hover {
  color: #9b3168;
}
.ice-blog a:focus {
  color: #da8bb4;
}

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 :

.ice-blog {
    max-width: 960px;
    section {
        background: blue;
    }
    @media screen and (max-width: 960px) {
        max-width: 400px;
        section {
            background: pink;
        }
    }
}

Compiled CSS :

.ice-blog {
    max-width: 960px;
}
.ice-blog section {
    background: blue;
}
@media screen and (max-width: 960px) {
    .ice-blog {
        max-width: 400px;
    }
    .ice-blog section {
        background: pink;
    }
}