The Simple Guide About INSTALLING and USING Sass(Scss) on Windows

I really hope you enjoy my article, continuously spend time working on it, and updating it always usefully.

How can we use it?🙄

The best way I found was to use an application to compile the Sass files into CSS. (or you can use the command line as well)

Here, mostly use two applications on Windows:

1. Prepros — https://prepros.io/
2. Koala — http://koala-app.com/

Now, This is the time to go to the step of installation.

Here we go! 🛴

Steps to Installing Ruby Sass on Windows

1. Download the Ruby installer: http://rubyinstaller.org/downloads/:-Look version with (x64).

Why is Ruby? 😏
Ruby is the language Sass is built on. So you need to install Ruby first and then Sass can run on it.

2. Open the Command Line (CMD)

Type the following command👉 Press Enter:

gem install sass

gem?😮
A gem is a piece of software or app made to run on Ruby.

After a few seconds… you’ll look see this :

Successfully installed

That’s it!🤗 Sass is now installed on your machine! 🎉✨🎊

How to check if Sass is installed?

Open a CMD👉type this

sass -v

👉Press Enter

Then how it looks:

Sass Version

How to update Sass?

Go to CMD 👉 type command👉 Enter

gem update sass

Get an Error!!!😣

Check your PATH

Check your PATH to make sure the folder to Ruby is listed there, if they're having an issue with the path add path:

Check your path

…Or just reinstall Ruby

Another trick is, reinstall Ruby and ✔ for the “Add Ruby executables to your PATH” option as shown below:

✔ for the “Add Ruby executables to your PATH”

Steps to use Sass in simple

1. Create a folder anywhere you like
2. Inside that folder create two subfolders: /css and /scss

3. Create a .scss file
Go into the /scss folder and create a file called: styles.scss
Notice the file extension .scss

4. Go back to the CMD
In the CMD line 👉 go to the folder that you create in the first step.

go to the folder that you create in the first step in cmd

5.Make Sass “watch” your /scss and /css folders
Type this in the CMD👉

sass --watch scss:css

The “ — watch” flag means Sass to “pay attention” to the folders /scss and /css, when you make changes to the .scss file, Sass will detect the change and compile the SCSS file into the final CSS file🤗.

Watch for changes

6. Edit the .scss file and watch Sass compile it into a .css file

do some changes and see the cmd

Do some changes, save changes, and watch the cmd line how to detect them and convert them to a CSS file. After the first time there automatically create a .css file inside the CSS folder.✨

Now you gain some knowledge about how to use Sass.😎

Clap more times👏 if you found it useful.😊

Thanks for reading 😎!