Hey Guys, I realized I've been using
SCSS in most of my Codepens. But we never really touched based on this topic.
So let's dive into introducing
SCSS to you all.
BTW: I have a free Giveaway on Twitter! 🚨 Free Giveaway
What Does SCSS Mean? permalink
It stands for
sassy css and is basically the follow up for
SASS stylesheets. You will find many people calling it
SCSS, but either way, they are very similar and used for modular
In general, some common use cases are:
We won't be going through all these topics today, but I will touch base on them during the next couple of days.
How Does SCSS Work permalink
A major thing to keep in mind is that a browser won't understand
SASS code. We need to process it and turn it into regular
There are several ways to do this; the simplest is using a pre-processing plugin, for instance for Visual Studio:
This will run in Visual Studio and compile your
SCSS files into one
There are also specific
SASS compilers see the website for more information:
Our First SCSS Example permalink
Let's get right in there with a very basic example:
🤩 SCSS 🤩
As you can see, we can now quickly change our colors, instead of having them repeating in every element styling.
This will result in the following Codepen.