What is sass | sass basics crash course | learn sass in 10 minutes – Codewithrandom
What is sass
This may sound interesting but SASS stands for Syntactically Awesome Style Sheets. SASS is known as a preprocessor. SASS is a preprocessor that reduces repetitive code in CSS and saves a lot of time when coding instead of using plain CSS only.
To use SASS, you need two files. One is your normal .css extension file and another is the .scss extension file. We code SASS inside our .scss file. Let’s learn why.
How sass Works?
So how does SASS works? How does it save time and why do we use another file?
Browsers in general cannot read SASS code and can only read CSS code. So how to use SASS then? We use a compiler. This compiler is an extension in Visual Studio Code or other editors.
What this compiler does is automatically convert your SASS code in the .scss file to normal CSS code in your .css file.
Now let’s see some very basic SASS examples to learn why it is so useful.
For our SASS compiler, I’m going to use the live SASS compiler in Visual Studio Code Editor.
Browser Support for sass
SASS is currently supported most modern browsers and if you use a compiler for your SASS, browser support wouldn’t be much of a problem.
First we will see what is CSS Variables. Variables can keep a certain value/property which we can easily use later. We use the Dollar sign ($) to make a variable. I’m going to make some variables in the example below and then assign it to the body tag.
Then in your SCSS file, paste this:
The output would be:
If you open your CSS File, your compiler would have already converted SCSS to CSS for you. Here’s how your CSS code might look like now.
Okay, now let’s see what is Nesting.
Nesting is simple. It means adding a code block inside another code block. This saves time and is more efficient in your code with SASS. We will use the same HTML code as earlier but different SASS code below:
And if you look at your CSS code, the compiler would have converted all from SASS to normal CSS for you like below:
Okay, let’s now see what is @import
Import is just like normal CSS import but with a twist. Import in SASS can easily link 2 or more SCSS files. So you can easily manage multiple SASS files with @import. For this example, we use the same HTML code. But for SCSS, we will use the same file earlier and also make a new file named color.scss
Inside our new color.scss file, paste this below code.
If you run this code, the background will not be purple yet because we haven’t linked our new file to our main style.scss file. So open our style.scss file and paste this new line of code above.
Now if we look at our CSS code, our new code in color.scss would have also appeared there. It will now be:
Try running the code and your output would be: