We can't overemphasize the importance of CSS ( ) when it comes to adding styles, design, layout, and everything you need to create a stunning website. But when it comes to complex projects anybody that has been coding for a while can agree with me that CSS code can be very long, messy, and sometimes hard to understand. cascading style sheet Congrats if you have these thoughts, your time to pick a preprocessor has come, We have several of them but I will be talking about . SASS What is SASS? SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful. Once you start working with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use on your website. It does this by compiling your Saas file by using a simple command, You will also tell Saas which file to build from and this happens in the terminal. saas For example from your terminal would take a single Sass file, , and compile that file to . sass input.scss output.css input.scss output.css Here are six benefits of using Sass: 1. CSS syntax If you know CSS you already know SASS. SASS comes with two different syntaxes: SASS itself and SCSS, the most used one. SCSS syntax is CSS compatible, so you just have to rename your .css file to .scss. Your first SCSS file has been created, just like that. You don't need to spend hours learning Saas, you can easily pick up the syntax as you go. 2. Variables This is easily one of the best features of Sass. I have found myself severally in a scenario where I was actually looking for a hex color code I used earlier for a style in my code and this can get frustrating at the time. But with Sass variables, you can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example: // $ : , ; $ : ; { : $font-family; : $primary-color; } // { : Helvetica, sans-serif; : ; } variables font-family Helvetica sans-serif primary-color #fff body font-family color compiles to body font-family color #fff 3. Nesting When writing HTML it has some sort of visual hierarchy but CSS doesn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here is an example of a bootstrap card component: // { ul { : ; : ; : none; } { : inline-block; } { : block; : ; : none; } } // { : ; : ; : none; } { : inline-block; } { : block; : ; : none; } nesting nav margin 0 padding 0 list-style li display a display padding 6px 12px text-decoration compiles to nav ul margin 0 padding 0 list-style nav li display nav a display padding 6px 12px text-decoration 4. Extends This is one of the interesting features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. Here’s an example in action: { : block; : ; : ; } { @extend .button; } // , { : block; : ; : ; } .button display border-radius 3px padding 16px .button-green compiles to .button .button-green display border-radius 3px padding 16px 5. Partials As the complexity of your projects grows the line of CSS written becomes larger to maintain and understand. Luckily, SASS has the @import rule. @import allows you to modularize your code making it easier to maintain by importing smaller SASS files. I know some people will say CSS also has an @import rule but the difference between Sass @import rule and the CSS @import rule is that all imported SCSS files will be merged together into a single CSS file, so in the end, only a single HTTP call will be requested because you will be serving a unique CSS file to the webserver. 6.Maths! Doing math in your CSS is very helpful. you can use addition (+), subtraction (-), multiplication (*) and division (/). In the example below, we are aligning two elements aside & article. on a 1000px screen: { : ; } { : left; : / * ; } { : right; : / * ; } // { : ; } { : left; : ; } { : right; : ; } .container width 100% article float width 600px 1000px 100% aside float width 300px 1000px 100% compiles to .container width 100% article float width 60% aside float width 30% Final Thoughts I understand if you think I didn’t add much cool stuff that Sass can actually do. The goal was to convince you to give one of these amazing tools a shot if you haven’t already. on | Follow me Twitter Github .
