Stop using CSS and start using SASS!

Hi there! I'm a Frontend Developer and I've been using CSS for a long time. At first, it was fun, but sometimes my stylesheets got larger and more complex, and it was hard to maintain, not to mention how hard it was making changes! That's when I decided to use a CSS preprocessor, and the best choice was Sass.

Sass stands for Syntactically Awesome StyleSheets, and that's true. it has features that don't exist in normal CSS, like nesting, mixins, inheritance, and a lot more good stuff that will help you write a more readable and maintainable CSS.

So here are the five reasons why you should use Sass instead of CSS:

1- Easy to learn

SASS comes with two different syntaxes: SASS itself and SCSS. SCSS syntax is CSS compatible, so you just have to rename your ".css" file to ".scss" and your first SCSS file has been created, just like that. But, by doing this you are not using any of the superpowers and features SASS provides, but at least you realize you don't need to spend hours and hours to start using SASS. From this starting point, you would be able to learn the SASS syntax as you go.

And here's where I've learned SASS.

2- You can divide and conquer

As your project grows and becomes more complex, so will your stylesheets. You can add comments but it's not the best solution!

Fortunately, SASS has the "import" rule. "import" allows you to split your code into smaller ".sass" files making it easier to maintain by importing them. The difference between this and the CSS "import" rule is that all imported SCSS files will be merged into a single CSS file.

Importing SCSS/SASS files is easy:

• First, you need to start the names of the files that you want to import with a dash "_file.sass".
• Now you're good to import that files into one SASS file that will be compiled into a single CSS file that contains all the code inside all the small SASS files.

3- It offers variables

One of the great benefits of using SASS is the ability to use variables. A variable allows you to store a value or a set of values, and to reuse these variables throughout your SASS files as many times you want and wherever you want.

Imagine building a site with a set of brand colors that will be used everywhere; buttons, inputs, icons, tables, etc. With SASS you can store these colors as variables:

$color1: #212121
$color2: #FFFFFF
$color3: #FFFF00

Now that you've created your variables, all you have to do is use them!

body
    background-color: $color1
p
     color: $color2
input
     border: 1px solid $color2

4- Nesting is much easier

Another fantastic benefit of CSS pre-processors is their improved syntax. SASS allows you to use a nested syntax, which is code contained within another piece of code that performs a wider function. In SASS, nesting allows a cleaner way of targeting elements. In other words, you can nest your HTML elements by using CSS selectors.

This is how nesting works in SASS:

.container
     background-color: $color1
     display: flex
     justify-content: space-evenly
     align-items: center
     .heading
          flex-grow: 1
          color: $color2
    .paragraph
          color: $color2

5- It includes mixins

Using variables is great but what if you have blocks of code repeating in your style sheet more than once? That is when mixins come into play. Mixins are like functions in other programming languages. They return a value or set of values and can take parameters including default values.

! Note that SASS also has functions, so don't confuse a mixin with a function.

Let's take a look at an example of a mixin:

@mixin set-font( $family: 'Poppins' , $size: 2rem , $weight: 600)
  font-family: $family, sans-serif
  font-size: $size
  font-weight: $weight

To use a mixin, our code will look like this:

h1 
  @include set-font
  color: $color2

Final Thoughts

Before getting into SASS or any other CSS preprocessors make sure that you have learned and practiced CSS enough!

Becoming a SASS master may take a bit of time. But learning the basics and setting it up for your project won't take you long.

CSS pre-processors extend the basic CSS features by providing you with a set of powerful functionalities that will raise your productivity right away. I mentioned a few benefits but there are many more, like inheritance, functions, control directives, and expressions like if(), for() or while(), data types, interpolation, etc.