5 Reasons Why I Love Sass

control font size with SASSSass has come into my life to simplify the work of writing CSS. Its structure greatly facilitates organizing a project and helps you avoid repeating the lines of code over and over again. That’s why I want to share some of the reasons I love Sass.

For those who do not know, Sass is a CSS preprocessor, a tool that offers more features for working with styles but ultimately compiled into pure CSS. What are the advantages? Many, in fact not even I don’t know all the features in depth, but so far, this is what has made my life easier:

Variables

This was what excited me most of all when I met Sass. Back when I wanted to use colors for a website sometimes I had to use repeated values in many places and had no control over what color was which. Soon I was with many scattered colors in my CSS unidentified.

You can define variables for attributes that can be repeated over and over again. The great thing about this feature is that if you want to change an entire color palette, you only need to replace the variables.

See the Pen Variables by WBD (@webuilddesign) on CodePen.

Mixins

This tool makes writing CSS more convenient and faster. If you declare any attribute in CSS3 the ideal is to include prefixes for various browsers ( -moz, -WebKit, -ms, etc.) so that they can support it. Now imagine that you need to declare a box-shadow again and again throughout your CSS… Instead of repeating the same lines, you can create a mixin in which you can put all the code that will reuse and you can include some variables so that you can customize it in different cases.

See the Pen Mixins by WBD (@webuilddesign) on CodePen.

Structure a Sass project

You may have a single stylesheet and make a mixture of styles for buttons, fonts, columns, blocks, etc. In the beginning, it would be easy to identify the elements in order of appearance. But as the site grows and style sheet becomes more complex, you might simply lose the way and not have any idea if a style already declared or not. Then you might force to repeat it.

With Sass you can do separate your stylesheet files and arrange them to avoid duplicates. Then you can use @import to use a specific file into your main CSS file.

You can read the article in The Sass Way which explains more about the Sass structure.

See the Pen Structure a Sass project by WBD (@webuilddesign) on CodePen.

The functions

The Sass functions include handling of colors, math, mapping, and other strings. I’ve taken most advantage of the color functions to organize color palettes.. It’s really easy to adjust your color base to have variants that give you versatility.

See the Pen The functions by WBD (@webuilddesign) on CodePen.

Nesting

Nested styles can be very convenient for your classes to be more specific. I like to use it for links selectors and when I want to make clear that certain style only be used if it is within a more general one.

Although this tool is very practical, it must be used carefully. Remember With great power comes great responsibility!

See the Pen Nesting by WBD (@webuilddesign) on CodePen.

If you want to take your quality of CSS to another level, I really recommend using Sass. You will not regret it;).

To begin using the preprocessor, I recommend reading the Basic Operation Guide

You may also like...