Using nested selectors

In contrast to vanilla CSS code, Sass allows you to nest selectors. Nesting of selectors may help create better organized and more readable CSS code.

Getting ready

You can use the Ruby Sass compiler to compile the Sass code in this recipe into CSS code. Read the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, to find out how to install Ruby Sass. Use a text editor, as described in the Writing your code in a text editor recipe of Chapter 1, Getting Started with Sass, to edit your SCSS code.

How to do it...

The following steps will show you how to use nested selectors in Sass:

1. Create a Sass template called main.scss that will contain the following SCSS code:

   // scss-lint:disable ColorKeyword
   
   $text-color: black;
   $link-color: red;
   
   p {
     color: $text-color;
     
     a {
       color: $link-color;  
     }	
   }

2. Compile the main.scss file from the previous step into CSS code by running the following command in your console:

   sass main.scss
   

3. You will find...