Installing Bootstrap SASS, compass on Windows


Installing SASS(An extension of CSS that adds power and elegance to the basic language) and compass on Windows OS like Windows XP, 7 or 8 is a difficult tast. But in reality it is a simple tast if you do it properly. In this tutorial we are going learn installation of SASS, Compass and Bootstrap.

First we have to install Ruby. visit http://rubyinstaller.org/ download stable version like 1.93.

Ruby Installation

When Installing Ruby must check checkbox add ruby executables to your path, better select all. If not check you will face command line error like ruby /compass  is not recognized as internal or external command.

Now we have to compass

press win+R and run cmd command to open Terminal. Now use copy paste line one by on 

=============================

gem update --system

gem install compass

gem install bootstrap-sass

=============================

First Command (gem update --system) will check if there any update available for installing games.

Second (gem install compass) will install compass

Third one (gem install compass) will install twitter famous framework Bootstrap with SASS .

 project sanjay

Now you are done, its part time so our first dish will be creating a project name sanjay in directory e:xampp\htdocs (as I  installed xampp in e directory). open terminal run this command

========================================

e:

cd e:\xampp\htdocs\

compass create sanjay -r bootstrap-sass --using bootstrap

========================================

after installtion open config.rb in Notepad++ or in your preffered editor and change

stylessheets to css (also rename stylesheets folder to css), javascripts(also rename javascripts folder to js) to js as I am storing css file in css and javascript file in js folder. start compass

open terminal

=======================================

e:

cd e:\xampp\htdocs\sanjay

compass watch

=======================================

Don not close terminal window

Now open styles.scss (in folder scss) in Notepad++ write some code and save , you will see styles.css (in css folder) is overwritted with that code.


 Category : CSS   Posted By : Sanjay   on 2014-08-07 15:55:02


Related Post

blog comments powered by Disqus

Login



Categories

May I Know You

  • System » Unknown
  • Browser » Unknown
  • IP Address » 107.22.106.136
  • 4 Online