Declaring variables with !default

When you start using frameworks, such as Bootstrap and Foundation, as discussed further on in this book, you will also start using variables for customization. The usage of the !default keyword when declaring the framework's variables makes it possible to customize the code without changing the original code. Keeping the original code untouched enables you to update the framework source code without destroying your modifications.

Getting ready

Install Ruby Sass as described in the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass. You can edit the SCSS code of this recipe with a text editor.

How to do it...

The following steps will show you how to use the !default operator when declaring variables:

1. Create a Sass template called default.scss and write down the following SCSS code into this file:

   // scss-lint:disable ColorKeyword 
   
   $color: red; 
   $color: green !default; 
   
   .green { 
     color: $color; 
   }

2. Now run the following...