the way to Installing sass quickly and effective

MR.W

HELLO, GUYS I'M HERE INTRODUCE MY SELF AND MY NAME IS FAREL, JUST CALL ME MR.W SO HERE I WILL TEACH YOU HOW TO INSTALL SASS QUICKLY TO USE FOR YOUR CSS PREPROCESSOR. IT'S NOT DIFFICULT

BUT IF THIS WAY STILL NOT WORKS FOR YOU, INSTEAD YOU COULD RESTART UR COMPUTER, OR TRY AGAIN THIS WAY

 SO OK LET'S GO AHEAD.

1. INSTALLING RUBY  

 go to this same website, and install ruby on the current version. here we use sass through ruby, and done all installation process

2.    CHECKING RUBY INSTALLED 

 after installed click " windows + r " and after that you write, the command " ruby -v ", it means to check does your ruby installed.

3.    WHEN RUBY INSTALLED

    if the ruby already installed also after you command and entered, it will appear a proof that your ruby is installed

4.    INSTALLING SASS 

Write that command to install sasss " gem install sass ". enter and it will start to done every process of installation.

5.    CHECKING SASS INSTALLED

   after installed write this command " sass -v " and enter to check the sass already installed

 

6.    AFTER SASS INSTALLED

and sass succesfull to installed, and close the tab so after this let's installing the extension on your vscode.

7.    INSTALL LIVE SASS COMPILER

so don't forget to install this extension because it's useful for sass, so it used to compiles your .scss file laterly.

8.    GO TO VSCODE SETTINGS

go to settings...

9.    LIVE SASS COMPILE SETTINGS

Click live sass compile settings to replace savepath with css.

10.    SAVEPATH CSS

savepath must be css, to be a cup of compiled file. after you change to "css", and then save it

and after we did all of those steps, now we will save the sass path location to environment variables.

11.    GO TO RUBY FOLDER ON YOUR LOCAL DISK

And then open it... 

 

12.    GO TO BIN

open bin folder

13.    COPY THE ADDRESS LIKE THIS C:\Ruby32-x64\bin 

after copy the address, we're going to save it on environment variables.

14.    CLICK WINDOWS ICON, AND SEARCH " VIEW ADVANCED SYSTEM SETTINGS "

click " environment variables ".

15.    ENVIRONMENT VARIABLES

select path and then, click edit.

16.    NEW PATH 

click new

17.    PASTE PATH ADDRESS

after put the path location address click ok to finish and close all tabs

after done all the things, now it's time to running sass.

18.        CREATE .SCSS FILE 

create "style.scss" for example.and it must tag " css/ ", cause it used to save the sass codes to the css path that we were change to css before on the live sass compile settings..

19.    STYLING ELEMENT AND RUN THE CODE

and after you styling the element as you need, run "live sass" feature from the installed extension before to compile and save it to css.

20.    CONGRATULATION SASS ALREADY WORKED

and now you could use sass for your project.

So guys that's all I can explained and share about my knowledge for this installation based on my experience. if this way like not match to you sorry but please share this blog to people who needs the same.

THANKS TO VISITED!