Sunday, December 25, 2016

Installation and Usage of Sass on Windows

  1. 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.
  2. Open the Command Line (CMD) by pressing the Windows Key + R and type: CMD, then press Enter.

  3. Type the following command in the CMD:
    gem install sass


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

    That's it! SASS is now installed on your machine.
      Procedure to use SASS
  1. Create a Demo folder anywhere on your PC.

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

  3. Create a .scss file.

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



    Notice the file extension .scss. This is your SASS file.
  4. Return to the CMD line. In CMD you need to go to the Demo Folder as in the following:
       Return to the CMD line. 
       
       In CMD you need to go to the Demo Folder as in the following:
 
  Make SASS “watch” to your /scss and /css folders.
 
 
   
    6. Edit the .scss file and watch SASS compile it into a .css file.
        
    Make SASS “watch” to your /scss and /css folders.
 
 

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

  
Updated CSS File



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



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

Demo Example

Happy Coding Guys!


No comments:

Post a Comment