Table of Contents
Let’s take a little breake from Bootstrap for today and redirect the focus on different topic. This topic is Sass preprocessor and in this post I want to share with you seven reasons why you should at least consider learning more about it or even implement it into your regular work process. One more thing … Bootstrap also comes with styles saved in Sass.
Before we start, it is important to note that there are two “types” of Sass syntax you can use. First type is older version of Sass (saved as sass file) and second is the newer one called SCSS (saved as scss file). You can find more information about this in Learn Sass in 20 minutes post which explores this subject more-in-depth. And by the way, it’ll probably take you less than 20 minutes to understand how Sass works and to start using it.
#1 – Variables
First thing in the line is ability to save various values into variables. Sass allows you to store there numbers, hexadecimal values colors and other thing you might need in your project. You can use these variables later on in your code just by referencing to this variable inside rule for certain selector. For those of you skilled in JavaScript or other programming language, if this sounds familiar to you, you are right. In Sass, variables works exactly like in any programming language.
For example, let’s say we want to create three new variables. One for color (hex value), second for border-radius (px value) and third for transition (duration in seconds). After this, we want to use these variables in button with class “btn”.
SCSS:
/*Creating variables*/
$color1: #2793e6;
$border-radius: 3px;
$transition-value: .25s;
/*using variables in button*/
.btn {
background: $color;
border: 1px solid $border-radius;
transition: background $transition-value;
}
CSS:
.btn {
background: #2793e6;
border: 1px solid 3px;
transition: background .25s;
}
#2 – Nesting
Second benefit of using Sass is nesting. This can be very handy and can keep your code clean and short if used right. One great way you can implement nesting in your projects can be for hover, active and focus states, media queries or just nested elements. However, many people are overdoing this, so their CSS then looks worse then it actually should. Good rule of thumb suggested by many professionals is nesting only up to three levels.
SCSS:
/*Nesting various states*/
a {
text-decoration: none;
&:hover { color: #2980b9; }
&:active { color: #3498db; }
}
CSS:
a { text-decoration: none; }
a:hover { color: #2980b9; }
a:active { color: #3498db; }
SCSS:
/*Nested media queries*/
.container {
@media screen and (max-width: 768px) {
margin: auto;
width: 750px;
}
}
CSS:
@media screen and (max-width: 768px) {
.container {
margin: auto;
width: 750px;
}
}
SCSS:
/*Nested elements – three level nesting*/
ul {
li {
a {
text-decoration: none;
color: #e74c3c;
}
}
}
CSS:
ul li a {
text-decoration: none;
color: #e74c3c;
}
#3 – Placeholder selectors
Third benefit is thing called placeholder selector. Basically, it is like a variable containing not just a value, but whole rule … Or couple of rules. You can simply put couple of rules into one placeholder selector and then reference to it by using its name inside some selector to use all these rules. For example, let’s create a placeholder selector called “button” and include it into element with class “button” later.
SCSS:
%button {
background: #1abc9c;
color: #fff;
border: 0;
transition: background .25s;
&:hover { background: #16a085; }
}
.btn {
@extend %button;
}
CSS:
.btn {
background: #1abc9c;
color: #fff;
border: 0;
transition: background .25s;
}
.btn:hover { background: #16a085; }
#4 – Mixins
Mixins are like a placeholders on steroids. They work in the same way as placeholder except that they also allow you to use parameters which can be used in rules nested inside them. Because of the similarity to placeholder selectors, it is always good idea to consider using selectors instead of mixins. To demonstrate how mixins work, we will use the example above and modify it by adding a parameter for background, color and transition-duration.
SCSS:
@mixin button($background, $color, $duration) {
background: $background;
color: $color;
transition: background $duration;
}
.btn {
@include button(#e74c3c, #fff, .35s);
}
CSS:
.btn {
background: #e74c3c;
color: #fff;
transition: background .35s;
}
#5 – @import Attribute
Another thing that Sass allows you is to important individual stylesheets into another one. Well, you can do this with good old CSS and @import rule with url( … ), but you can face some troubles with support and performance later on. With Sass, this will not happen. All imported stylesheets will be included in the final one during compilation into css. So, the result will be one big file containing all the styles without any @import.
#6 – Operational functions
One great thing Sass offers to designers are various functions for color management. You no longer have to think so much about colors for, let’s say, different states of elements. Sass can do it for you with minimum of work required from your side. Some of these functions are lighten(), darken(), desaturate(), saturate(), adjust_hue() and more. For example, let’s use use some of these functions to create hover and active state for a button.
SCSS:
$color: #ad0000;
button {
background: $color;
&:hover { background: darken($color, 7%); }
&:active { background: lighten($color, 3%); }
}
CSS:
button { background: #ad0000; }
button:hover { background: #850000; }
button:active { background: #d10000); }
#7 – Debugger
The last thing I want to mention is debugger implemented in Sass. When you code something in Sass and you want to compile it into raw CSS, every time Sass will run a debugger and check if provided code is valid. If you make some mistakes (mising semicolon or value), it will simply stop the compilation and show an error message with line number and snippet of code where you can find that mistake. This tool can be very handy and prevent you from deploying buggy code.
Summary
In a short, Sass is just awesome tools that can simplify and speed up your work process. It offers many benefits and those we talked about today are just a drop in the ocean. So, what are you still waiting for? Take a look at the Learn Sass in 20 minutes post and start learning this great preprocessor.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
