Supercharge your CSS with SASS.
Introduction
The big question is, what is sass? Sass stands for “Syntactically Awesome Style Sheets” and is basically a CSS preprocessor that adds special features (more on that later on) to CSS. The main idea behind the creation of sass is to make the coding process simpler and more efficient. Every year CSS stylesheets are growing in size and complexity and that’s one of the main reasons why you should think about using sass in your next project or at your current job. Before I touch on some of the features that make sass great, it will be a good idea to talk about how it works behind the scene and how to use it for your next project.
I previously mentioned that sass is a CSS preprocessor, but what in the world is that? A CSS preprocessor is basically a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Sass is perhaps the most popular preprocessor around, but other common examples include Less and Stylus.
Getting Started
Sass is compatible with all the versions of CSS, the only requirement is that you must have Ruby installed in your computer. Most Mac OS users will probably have Ruby already in their computers, to check if you have ruby installed write the following command in your terminal ruby -v, this should return the version of ruby you currently have in your computer. In case you do not have ruby in your computer follow this link for installation help. After you have ruby installed than you must install sass. Below are few ways you can install sass:
- Using npm:
npm install -g sass(need node.js installed) - Using Homebrew:
brew install sass/sass/sass(need homebrew installed) - For Windows:
choco install sass
Once you have sass ready to go (you can check by entering sass -v in your terminal), you will tell sass which file to build from and where to output CSS to. For example you can achieve this by running sass input.scss output.css. Basically write all your sass code in the file with the .scss extension and sass will compile it into the.css file of your choosing. Sass also has a very neat feature that allows it to watch your files, so every time you save your files sass will compile your code to CSS. In the case of the files I mentioned above you will place the — — watch flag in front of your input.scss. For clarity, it would look something like this sass — -watch input.scss output.css. Now let’s take a look at some of the features that make sass a great tool for developers and designers.
Features
Variables
Like many other programming languages such as Ruby and Javascript, sass allows us to create and use variables. These variables give us the ability to store certain information in regards to our styling and use it throughout our application. For example we can store a specific color that is used in our application in a variable and everytime we need access to that color we can just reference it by its variable name. If the same color is used in many different places in our application and we decide to change it, we only need to change the color where the variable was declared and this will cause a trickle down effect. So how do you declare a variable in sass? It’s very simple just put $ in front of your variable name and that’s all. To use it is very convenient as well, below I have an example of how to declare and use a sass variable.
SCSS file
CSS output
Nesting
Nesting is another very cool feature that sass provides for us. This feature has two purposes, the first is to help you write less code (who doesn’t like that) and the second is to closely resemble the structure of your HTML hierarchy. A word of caution, do not get carried away with nesting because it can become difficult to follow.
SCSS file
CSS output
Mixins
This feature is one of the most useful in my opinion that sass provides. Mixins are basically a block of code that allow us to group CSS declarations which we can reuse throughout our site. You can create a mixin by writing @mixin followed by the name of the mixin. If you want to use it just write @include and the name of the mixin and vuola. Below is some code that I think will make this concept of mixins more clear and illustrate how useful they can be.
SCSS file
CSS output
As you can see mixins can save you a lot of time and keep your code DRY (Don’t Repeat Yourself).
Extend/Inheritance
This is another feature provided by sass that does wonders in regards to keeping your code DRY. To use this feature your need to use the keyword @extend. The purpose of this feature is to allow one selector to inherit styles from another selector. The example below can probably do a better job at illustrating this.
SCSS file
CSS output
Inheritance can help maintain our code more readable and DRY.
Conclusion
If you are a designer or maybe a front-end developer sass is a great tool that you can add to your toolbox. Sass makes CSS feel more like many of the other programming languages, which some developers think is very useful because in some ways they can apply they concepts they already have learned from other programming languages. By no means this are the only features that sass has, if you want to take a deeper dive into the world of sass follow this link and enjoy the possibilities.
