SASS: Syntactically Awesome Style Sheets

Introduction

CSS has been the go-to for styling front-end web applications for many years. Throughout the years, other web technologies have become more sophisticated and more complex. CSS itself has not undergone any significant changes as compared to the others. Nonetheless, there are new ways in dealing with CSS especially in very big applications. This is called CSS preprocessors. LESS and SASS are two famous css processors that many web developers use to modularize their CSS codebase so as to have better readability. In this blog, we will learn how to use SASS to help us in organizing our CSS codes.

Basics

1. Variables - store data so as to be used to any part of your stylesheet
   • $myVar= 30px
   • $myFont= Tahoma, sans-serif
   • $myColorBlack= #000

   To use in code simply plug-in the variable to where the value is usuall placed:

   p { color: $myColorBlack } //paragraph with black text

   div{ height: $myVar } // div with height of 30px

2. Nesting - nest as many tags to have a more readable code base
   • body{ div { h2 { font-size: 30px; } } } will be compiled to body div h2 { font-size: 30px; }
   • div{ h2 { color: red; } div { h3 { color: blue; } } } will be compiled to div h2 {color: red} div div h3 {color: blue}