SCSS Vs CSS Explanations -How to Use SCSS/SASS

SASS is a tool that allows you to write & organize CSS more precisely & very easily. And SCSS is an extension of SASS. For example- style.scss, _header.scss, _footer.scss, so on so forth.

On the other hand, CSS refers to ‘Cascading Style Sheets‘ that are executable by web browsers. Note: CSS is not a programming language, it’s a stylesheet language.

Is SCSS the same as CSS?

No. SCSS syntax looks the same as CSS but they are not the same. After all, the web browser can not read or execute SCSS. It’s you as a web developer to use it to write better CSS & organize your files using SASS. Don’t worry! SASS will generate a CSS file from your multiple SCSS files automatically that you can use in the production.

Which is faster CSS or SCSS?

Definitely, SCSS is faster than CSS to write & organize your all CSS files. You can create multiple ( _partial.scss ) to organize your CSS files and keep them separate. If you write all the CSS into a single file, it will be hard to find a specific element in the future, especially when your website will become large.

So it is advised to create multiple ‘_partial.scss‘ to keep your development process faster and easier.

Can I use CSS on SCSS?

Yes. You can use CSS on SCSS files. But you can’t do the vise-versa. For example- you can not write the following SCSS into a CSS file:

.site-header {
  background-color: rgb(240, 255, 255); display: flex; justify-content: space-between; align-items: center;
  min-height: 400px; font-family: $fontprimary;
  .navbar {
    background-color: $lightbg;
    ul {
      display: flex;
    }
  }
}

How to use SCSS & generate a CSS file

You do need to use SASS in order to use SCSS. There are a couple of ways you can install & use SASS on your computer. Here is the easiest way among them:

Step-1: Install Visual Studio Code

It’s a free code editor by Microsoft. If you don’t have it yet, go ahead and download & install it on your computer.

Step-2: Install Live Sass Compiler Extension in VS Code

“Live Sass Compiler” is an extension of Visual Studio Code Editor. The extension is also free to use.

Open the VS Code editor and search for the extension mentioned above. Just install & activate it.

Step-3 (final step):

You are about to use the SCSS/SASS. Just need to create the necessary files and folders.

In your project, create a folder called “sass“. In this folder, you can create as many ‘SCSS’ files as you need. In this example- I will create three partial files called ‘_header.scss, _footer.scss, _about-page.scss‘. My goal is to write all the header/navigation-related CSS/SCSS into the ‘_header.scss‘ file, and so on so forth.

Now I have to create a file to import all the partial files. I am going to name it “style.scss“. Note that this “style.scss” file does not have the underscore before its name. That means it’s not partial.

Okay, now you have to import the three partials into the “style.scss” file. See the below example to see how to import the partials:

@import './header';
@import './footer';
@import './about-page';

You are all set! Now you are ready to use Sass/SCSS in your project. Open any of the partial files ( _header.scss, _footer.scss, _about-page.scss) and write your SCSS code, and hit the “Watch Sass” button/link in VS Code editor.

That will watch all the files and instantly generate a CSS file called “style.css” that you can use in the production.

Previously it was a hassle to install & configure SASS on Windows computers specially for Ruby installation. Nowadays, you have a couple of easy options for using SASS both in Windows & Mac.

Anyways, please let me know in the comment if you found this post helpful.

If you have any questions, feel free to contact me.