Category Archives: SASS

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