WHAT IS SASS?
Sass is a CSS preprocessor. It greatly expands on the capabilities of vanilla CSS, allowing us to use features that aren’t going to make it into the CSS spec anytime soon. The best part is, we don’t have to wait. We can use these features today, because Sass is processed and output as a vanilla CSS file that is readable by all modern browsers.
This allows Sass to be continually expanded upon using add ons & extensions without worrying about browser support (the bane of any web designers existence). I’m not going to go into great detail about how to start using Sass, as there are already some great resources out there for beginners. I will list a few of my favorites at the bottom of this post to get you started.
WHY DO WE USE SASS?
Sass allows us to work faster, with greater organization, better modularity, and allows us to do things with math and calculations that were not possible before without resorting to javascript. It is highly expandable, and people are adding functionality onto it all the time. You don’t need to be a programmer to wrap your head around it. The syntax is simple and looks a lot like vanilla CSS. You can even write vanilla css in a Sass file if you want, only using the aspects of Sass you feel comfortable with as you build your knowledge base.
SASS HAS IMPROVED THE SPEED OF OUR WORKFLOW.
Here Are a Few of the Reasons Why:
Variables reduce redundancy and allow us to store common values in variables that can be easily called on a large number of elements. A normal CSS file requires a lot of repetition. Colors, font families …etc all have to be declared on multiple elements. Worse, when we want to change those values, we have to track down every instance that they appear in the stylesheet. Utilizing Sass variables, we can store that value in one place, and can easily call it elsewhere in the stylesheet. Change the variable, and every element that calls it will change with it, all at once.
Mixins are similar to variables, except that they can store large blocks of css instead of just one value. For example, if you have a button style that needs to be recreated multiple times throughout your stylesheet, you can store the code in a mixin, and call all the css code that makes up that button on each instance that requires it, modifying small aspects of that button using parameters.
Organization: Sass helps keep us organized. We can use multiple Sass files, one for layout, one for variables, one for mixins… etc, without worrying about having to call multiple CSS files in the DOM, helping our sites load faster with less bloat. Since you can configure Sass to combine all files into one flattened css file, we can use as many Sass files as we need to keep organized, knowing that when it comes time to render in browser, there will be only one CSS call.
Sass also let’s us nest our styles. Nesting is a great way to keep organized and reduce repetition. It allows us to nest elements inside other elements, reducing the amount of code we have to write, and providing a clear visual as to how the styles are laid out.
Modularity: Mixins allow us to write blocks of code that are reusable elsewhere in the stylesheet, or even between projects. Using Sass, it is easy to write a number of heavily modular styles that can be imported into every new project, allowing us to create our own css libraries and frameworks, based on our own custom needs.
Expandable: Smart people are creating things for Sass all the time and giving it away for free. Here is a great resource for Sass extensions. As of this writing, they are hosting over 100 extensions that expand what you can do with Sass. Everything from allowing you to create grids to writing vendor prefixes for you. We have a few favorites here at Zen Den, and I will provide some links at the bottom of this post.
GETTING INTO SASS
Use as Little or as Much as You Want
Sounds great. So how do you get started? The best place is the official guide on the Sass website:
You can get started right away without knowing much. You can write vanilla CSS in a Sass file. If you want to write your stylesheets as normal, maybe using a few variables here and there, it’s not a problem. You can add-on to your knowledge as you go without having to dive in fully all at once.
SASS RESOURCES:
Official Sass Site
Curated Extension Library
SASS TUTORIALS:
Installing Sass
Getting Started with Sass
ZEN DEN RECOMMENDED EXTENSIONS:
Suzy – Create Sass based grid systems.
Modular Scale – Easily create a modular scale for margins and font-sizes.
Breakpoint – Simplifies writing media queries.
