Sass stands for syntactically awesome stylesheets. Sass is a scripting language that is compiled into regular CSS. It was created to help writing CSS easier and more efficient.
CSS is great but it lacks the ability to do advanced programming and calculations. Sass is CSS with superpowers but browsers like Chrome cannot read Sass files. So Sass is in a raw format often called precompiled code.
Advantages
- Break your stylesheet into separate files that are then merged into one large file. Often stylesheets get really long and unwieldy, and Sass helps you to work on things in small sections and avoid all of the scrolling back and forth.
- You can use variables for commonly referenced things like color, font-family, margin, etc. You change the variable value and it updates everywhere it is referenced.
- Allows you to perform things not fully supported in CSS like variables, nesting, mixins, math operators, and inheritance.
Disadvantages
- Requires tooling (a build process to compile or convert Sass into CSS). This takes some setup and learning to understand how this works. There are different ways you can do this. Some common ways are using Grunt or Gulp or desktop applications like CodeKit.
- For small style changes it can be somewhat annoying to compile each time. So it requires discipline to avoid editing directly on the server.
- Can cause problems if you are working with another developer not familiar with Sass and is writing changes to compiled CSS vs the raw Sass code. So it requires everyone to follow the same development workflow.
One way you can remember the relationship between Sass and CSS is to think of Sass as cookie dough and the compiled CSS is a freshly baked chocolate chip cookie. They are both CSS, but Sass in a raw format that needs to be compiled (baked) into the final browser readable CSS.
2. Code compilers are like the oven
For small projects Sass may be overkill but for large projects Sass will save you a lot of time in the initial build and with future maintenance. It allows you to use variables to quickly adjust colors, font sizes, padding, etc. that then get baked or populate through your entire CSS that use the variable. No more find and replace.
If you would like to see an example of what a Sass project looks like, I highly recommend referencing the Bootstrap 4 source code.
Would you like to learn how to customize Bootstrap 4 Sass files?
If you are new to this process and would like to learn the steps, I am currently developing some training. Sign up below if you would like to be notified when the training is ready.
