We love to share as much as we like to find answers to some of the interesting problems that we work on.

We have on our side a team of Industry Veterans, Domain Experts, Proficient Business Consultants and Competent Technologists, who have fascinating minds and captivating ideas.

We share what we think and what we feel...

Welcome to the Fulcrum Worldwide blog! See what's happening in the world of IT/Fulcrum, right now!

Back

INSTALLATION AND USAGE OF SASS USING WINDOWS

INSTALLATION AND USAGE OF SASS USING WINDOWS

 

 

Download the Ruby installer from:

http://rubyinstaller.org/downloads/ — Look for the version with x64 on it. Be sure the Ruby installer is version is 1.9x. SASS doesn't work on 2.x versions.

   

Open the Command Line (CMD) by pressing the Windows Key + R and type: CMD, then press Enter.



http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/image1.png

Type the following command in the CMD:
gem install sass

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/Image2.png

It will take a few seconds to install SASS. At the end, you will see this in CMD.

  http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/Image%203.png

That's it! SASS is now installed on your machine.

 

Procedure to use SASS:-

  Create a Demo folder anywhere on your PC.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/Image4.png 

 Inside that folder create the two sub folders /css and /scss.

 
http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/Image5.png

 

Create a .scss file. Go into the /scss folder and create a file called: demo-styles.scss.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/image6.png

Notice the file extension .scss. This is your SASS file.

Return to the CMD line.

In CMD you need to go to the Demo Folder as in the following:http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/Image7.png

Make SASS “watch” to your /scss and /css folders.
http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/Image9.png

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/Image10.png

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

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/Image11.pnghttp://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/image12.png

 Updated CSS File:-


http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/image13.png
 

Included 'reset.css' File in demo-styles.scss:-

http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/44b888/install-and-using-sass-on-windows/Images/image14.png
 

You have now leveled up by knowing how to use SASS.

Demonstration with an example.

Comments