What is SCSS?
SCSS is actually the CSS with some superpowers. We just want to write CSS in a more efficient way to better organize things! Don’t spend the eternity to find the code that has some bug to fix it. Split the code into the chunks, think of them as the reusable components. After all, follow the famous principle in programming we all know – DRY! Don’t repeat yourself. Writing the modular code is the next big thing that will save you time. And you know what? Your teammates will appreciate it as well! Finally, get rid off bloated code – your CSS file size impact on page load speed and SEO rankings!
I’m super fine with classic CSS coding, why should I need a modular CSS?
You wrote thousands of lines of CSS code and worked on many different projects? It’s really just a matter of the time when you will want to improve the way you’re coding. Why? It’s deadly simple. You want to deliver projects faster and more efficient. That’s very important for a freelance web developer. Is that really possible with 8k lines of redundant and messy code in one single CSS? For instance, you want to reuse some part of the code from it. How much time will you spend on finding it? Have you wondered how much repetitive code do you have?
Use CSS Pre-processors
There are a number of them today. The most popular are LESS and SASS(SCSS). I prefer using SCSS, but it’s fair to say that differences are few. You cannot write SCSS like you write regular CSS code, because it has features that regular CSS doesn’t. Finally, all SCSS codes are compiled to the regular CSS file. You must install some tools on your machine to run SCSS. Yes, I’m talking about NodeJS (that scary thing everyone talks about), and I strongly recommend you to get comfortable with using NodeJS, Webpack, Yarn (and other cool tools) as soon as possible. The setting of this workflow is out of scope for this article, although it will be definitely covered in my blog once.
How SCSS would improve your CSS? Well, SCSS has some unique features that CSS lacks, as variables, mixins, imports, nesting and many more! Although, the things are improving and we hope that CSS will continue in that fashion. For example, variables are introduced into CSS now.
Variables
// Declare a variable
$brand-color: #1099ff; // References a variable
h1 {
color: $brand-color;
}
h3 {
color: $brand-color;
}
.cta-text {
color: $brand-color;
}
So, what do we have here? The multiple elements with the same color. Which means, if you are going to change the color to a red for example, you just need to edit $brand-color variable and it will be applied everywhere! Yeah, that’s right – just in one place! You don’t need to change values on each selector that use the color variable.
Mixins
CSS is not a language. It’s just a markup language. Really? Let’s add some power then. SCSS can use “if statements”, loops and even functions! The last is commonly known as mixins in SCSS. Mixins may have arguments, just as regular functions in PHP. Yeah, you can use those cool things which are popular in other programming languages like PHP, JAVA, C#, JS, etc…
// Declare a mixin
@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}
h1 {
// Call a mixin
@include headline(blue, 14px);
font-family: "Arial", sans-serif;
}
h3 {
@include headline(red, 12px);
font-family: "Times New Roman", sans-serif;
}
This will compile to:
h1 {
color: blue;
font-size: 14px;
font-family: "Arial", sans-serif;
}
h3 {
color: red;
font-size: 12px;
font-family: "Times New Roman", sans-serif;
}
Pretty cool, isn’t it? Within @include we are calling the mixin that we declared before. And we can use it on multiple elements with other parameters.
Nesting
This improves readability of your code. Thus, you don’t need to write complex selectors! Nesting takes care of those messy, confusing, and often repetitive work. It also keeps your code organization better.
So, instead of writing this in CSS:
.hero {
width: 100%;
height: 300px;
}
.hero button {
border: 1px solid blue;
}
.hero .heading {
font-size: 1.8rem;
}
You write this SCSS code:
.hero {
width: 100%;
height: 300px;
.heading {
font-size: 1.8rem;
}
button {
border: 1px solid blue;
}
}
As you can see, the nesting is a powerful feature, however, use it with caution! You should never nest more than 3-4 levels because it could have an impact on a website performance. Also, it could be very difficult to read and maintain a code with many complex nesting. Don’t forget that we use SCSS to improve our styles, not to overcomplicate the things!
Imports
You can use @import to import SCSS files into each other. Wait a minute, this is possible in CSS, too! Yeah, it is. Although, there is one huge drawback. If you do that via regular CSS you will call additional external requests. In contrast, with SCSS you combine all partials into one “main.scss” file. Finally, after compiling – you have only one CSS file and one external request. As a result, your website will load way faster! By using NodeJS and WebPack that I mentioned before, you can minify all production code and significantly save extra bytes!
// main.scss file
import '_header.scss';
import '_typo.scss'
import 'components/_button.scss';
import 'components/_cta.scss';
Just imagine how you could improve your code organization using imports. Possibilities are endless!
SCSS is very powerful!
There are many things you can do with SCSS, that are not covered in this article. We’ve just scraped the surface here. I’ll share with you SCSS powers and best practices in more detail in the coming months. It’s always hard to switch from one work-style to another. Sometimes it’s very painful. However, as soon as you get comfortable with SCSS – you’ll never go back to regular CSS again! Just imagine your own library of reusable components that you can copy & paste to new projects when needed. SCSS is a huge time saver for every freelance web developer! Furthermore, I advise you to check official SASS documentation and find other materials for learning online.
