Hey guys! Do you know that initially, frontend development was all about HTML, CSS, JavaScript, JavaScript, JavaScript..................? However, over the last few years, it has become way more complex than before. Now, there are a lot of frameworks for CSS and JavaScript that help in building awesome products!
Today we're going to discuss such a framework - Sass. Syntactically Awesome Stylesheets (Sass) is the most stable, mature and powerful grade CSS extension language. Simply speaking, it splits a CSS file to make it readable, edible, understandable, and structured.
Before we move on, let's discuss the difference between SCSS and Sass as many of you may be confused about their relationship.
Sass vs SCSS
Sass has two syntaxes:
SCSS
Sass
SCSS is also known as Sassy CSS. It's file extension is .scss. It is the newer and most used version of Sass as it also has a similar syntax to CSS. This is because it’s a language extension or you can say that it is a superset of CSS. So, any valid CSS code is also a valid SCSS code!
Whereas "Sass" is an older syntax of Sass. You can think of Sass as the dad and SCSS as the son that resembles his father by more than 90%. SCSS uses brackets but Sass uses indentations. Its file extension is .sass. Sass may sound complicated but the thing to note is that if you know CSS, you know Sass.
Let's visualize their difference!
Sass:
body
background-color: #FFC0CB;
color: #800080;
SCSS:
body {
background-color: #FFC0CB;
color: #800080;
}
Note: You can't just learn Sass/SCSS directly. You need to learn CSS before you get started with its frameworks. Therefore, if you are a newbie Web developer who does not have knowledge about CSS, then do not read beyond this point as you will only get confused!
Variables
Imagine that you are building a new website by following a certain color scheme. Let's say that you are using blue and green everywhere. But now you find out that pink and purple would look so much better! I'm telling you, it's gonna be hell changing those color codes from every single part of your code ＞﹏＜Don't worry, I got you covered! You can easily do so using Sass/SCSS variables ;)
Variables store information and allow you to reuse it throughout your stylesheet! You can store things like colors, font, or any other CSS value you think you'll need to reuse. This kind of thing is extremely useful in cases like the one mentioned above. To make something a variable, Sass uses the $ symbol.
Example:
//Declaring variables
$primary-color: #FFC0CB;
$font-stack: Helvetica, sans-serif;
body {
color: $primary-color;
font: 100% $font-stack;
}
Nesting
Nesting is another useful feature of Sass. You can nest code but don't end up nesting so much that your CSS file becomes too big or rendering performance is affected. Here, I would like to quote the Inception rule;
Don't go more than four levels deep.
It's not like you can't but if you do, the code could also become too complicated! To know how to perform nesting in SCSS, let's take a look at an example of a navbar. I mean, who doesn't like designing navbars?
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 4px 10px;
text-decoration: none;
}
}
See what I did there? The ul, li, and a selectors are nested inside the nav selector. This is a good method to organize your CSS as by doing so, your code becomes more readable.
Mixins
A mixin is defined with @mixin. It lets you write groups of CSS declarations that can be reused throughout your website.
Syntax:
@mixin name {
property: value;
property: value;
property: value;
.............................
}
Example:
@mixin theme($theme: Black) {
background: $theme;
box-shadow: 0 0 2px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: Black);
}
.success {
@include theme($theme: Blue);
}
In the above-mentioned example, you may have noticed @include. Now you may be thinking what is it doing there? Well, the @include directive is created to let you use (include) your mixin.
Extend
It is quite useful most of the time. With the help of @extend, you can "share" a set of CSS properties from one selector to another. In this example, we will create a simple series of messaging for errors, warnings, and successes. We will also use another feature called placeholder classes. It is a special type of class. Moreover, it only prints when extended. It also helps you to keep your compiled CSS neat.
/* This one will print because it was extended. */
%msg-shared {
border: 2px solid #FFC0CB;
padding: 15px;
color: #800080;
}
// This one won't print because %equal-heights was not extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.success {
@extend %msg-shared;
border-color: blue;
}
.message {
@extend %msg-shared;
}
.warning {
@extend %msg-shared;
border-color: red;
}
.error {
@extend %msg-shared;
border-color: yellow;
}
The above code tells .warning, .error, .success and .message to behave exactly like %msg-shared does. Meanwhile, %equal-heights won't print because we never extended this poor thing👀
Using partials to split your code
Did you know that you can create partial Sass files that contain little snippets of CSS? Or that you can include those partial files in other Sass files? If not, then I got good news for you, you can do so! A partial is basically a Sass file named with an underscore at the front e.g. _nav.scss. This underscore tells Sass that the file mentioned is only a partial file and should not be generated into a CSS file.
For example, if you are building a website and need the _nav.scss file in the main.scss file, this is how to do it:
@import 'nav'
Usage of if/else
The @if directive in Sass is useful when you are testing for a certain case. It works just like the if statement in any other programming language. You can also add @else and @else if when needed!
@mixin make-bold($bool) {
@if $bool == true {
font-color: #FFC0CB;
}
}
Usage of for loop
It adds styles in a loop. This works just like a for loop in any other programming language. But here, @for is used in two different ways: "start through end" and "start to end".
"start to end" excludes the end number as part of the count.
"start through end" includes the end number as part of the count.
A simple start through end example:
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
This is a useful and powerful method to create a grid system.
Usage of while loop
It works just like a while loop in any other programming language. The @while directive creates CSS rules until a certain condition is met. We can create a simple grid system with a while loop too! Let's visualize it:
$i: 1;
@while $i < 14 {
.col-#{$i} { width: 100%/12 * $i;}
$i: $i + 1;
}
Firstly, we will define a variable $i and then set it to 1. Next, we will use the @while directive to create the grid system while $i is less than 14. After setting our CSS rule for width, $i is incremented by 1 in order to avoid an infinite loop.
Conclusion
Frameworks can be pretty useful if you know how to utilize them properly. SCSS is quite popular and comes to the rescue in a lot of scenarios. But there are other superheroes like Bootstrap and Tailwind out there too! Be sure to check all of these out and then choose your one and only! That's all folks. Hope you guys learned something new. Let me know if you found this article helpful and useful in the comments below :)
Let's connect!
✨ Github