Compass : CSS Framework ~ Web CodeHelpers

Compass : CSS Framework

Compass is an open-source CSS Authoring Framework.
Compass uses Sass.



How to intall SASS and Compass to the windows?

To install SASS and Compass in windows mechine follow the below steps

1) Install ruby in windows using Ruby installer. You can find the ruby installer for windows (32bit

and 64bit) at http://rubyinstaller.org/downloads/

2) Open command prompt and go to bin folder of the ruby installtion. Default ruby installtion path

is C:/Ruby-<version>/bin

3) Install sass using command “gem install sass” in the command prompt.

4) Install compass using command “gem installl compass” in the command prompt.

5) After installtion of compass set environment path for bin folder of ruby installation if you were

not set path setting in the ruby installtion process.

6) Now SASS and Compass are installed in your mechine.

Implementaion:

1) Create your project under /www or /htdocs or /webapps

2) Go to your project folder

3) Create assets forlder (i.e you can name anything for asserts folder. For intitiveness I named

folder as “assets”)

4) Open command prompt and go to assets folder

5) Run the command “compass create” then it will create the sass folder, stylesheets folder and

config.rb file.

6) If you required any path or file or folder name changes you can make them in config.rb file.

7) If you make any changes in .scss files then run the following command to effect those changes in

the .css file and in your project.

Command:  compass watch assets

8) Now the changes are effeted in .css file.
Author
Bhaskar Vankayala
Sr Software Engineer UI
Hyderabad

1 comments :

  1. Ni Hau,


    Hip Hip Hooray! I was always told that slightly slow in the head, a slow learner. Not anymore! It’s like you have my back. I can’t tell you how much I’ve learnt here and how easily! Thank you for blessing me with this effortlessly ingestible digestible content.

    I have 2 routes angular1 and angualr2 in same application.I have used ngupgrade for this.When i go for angualrjs route it displays its view but when i go for angualr2 route then along with its view angualr1 view also display.what should i do for separating view based on route .i have used and on same app.component.ts
    Thanks a lot. This was a perfect step-by-step guide. Don’t think it could have been done better.


    Gracias

    ReplyDelete

Subscribe updates via Email