How to compile SASS to CSS in Compass

Step 1:
Go to http://rubyinstaller.org/ and download ruby.

Step 2:
In the installation when you go through “Installation Destination and Optional Tasks” step you should check the second and third option.

Step 3:
When the installation is finished you should open command prompt(cmd)

Step 4:
Then install  first “gem install compass” second “gem install sass”.

Step6:
Then go to your project folder like: “D:Projects\Content\styles” and create a file “config.rb” and write in the file.

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = ""
sass_dir = ""
images_dir = ""
javascripts_dir = ""

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Step 7:
After all the above is finished
in cmd navigate to that same path where you’ve put the config.rb and just type “compass watch”. it will listen for changes in the scss files

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s