Compass and Sass, how to install and use on Windows?
This is the beginner guide to install and use Compass and SASS on Windows. If you have working experience with CSS and you decided that you want to have a cleaner stylesheet or better organization of all of your stylesheets than this post is for you!
Install SASS and Compass
So, what if I say to you that there is a way to write cleaner, more organized stylesheets? Probably you would say “Yes! There is a way!”. And YES there is a way, with SASS. Therefore I wrote a post about SASS a few days ago which you can find here, so take a look at it if you would like to know more about it!
First of all, you need to have Ruby installed on your computer. If you already have it, than you can check the version in CMD using the
ruby -v command, if not, than here is a link where you can download the latest version of Ruby.
Ok! Let’s install everything we need. First, we will install Compass. Open your Terminal.app and type
gem install compass. As a result, you should see something like this in your cmd when it’s done:
Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks! Successfully installed compass-1.0.3 Parsing documentation for compass-1.0.3 Done installing documentation for compass after 1 seconds 1 gem installed
If that’s not what you saw when you ran that command, you may not have Ruby on your machine. The next step is to install SASS as well. Now type
gem install sass. You should have something like this after installation is finished.
Fetching: sass-3.5.5.gem (100%) Successfully installed sass-3.5.5 Parsing documentation for sass-3.5.5 Installing ri documentation for sass-3.5.5 Done installing documentation for sass after 6 seconds 1 gem installed
I also like to install css_parser to take advantage of all the features of compass stats which outputs statistics of my Sass stylesheets. It outputs a report that gives a count of the Sass rules, properties, mixins defined and mixins used as well as CSS rules and properties that get output from your Sass-stylesheets. Run this command to install
css_parser. You should have something like this after installation is finished.
Fetching: public_suffix-3.0.1.gem (100%) Successfully installed public_suffix-3.0.1 Fetching: addressable-2.5.2.gem (100%) Successfully installed addressable-2.5.2 Fetching: css_parser-1.6.0.gem (100%) Successfully installed css_parser-1.6.0 Parsing documentation for public_suffix-3.0.1 Installing ri documentation for public_suffix-3.0.1 Parsing documentation for addressable-2.5.2 Installing ri documentation for addressable-2.5.2 Parsing documentation for css_parser-1.6.0 Installing ri documentation for css_parser-1.6.0 Done installing documentation for public_suffix, addressable, css_parser after 1 seconds 3 gems installed
Now you’re ready to see Compass and Sass together in action! :). Let’s check if everything is working as expected. Create a folder called “compass-test” on your Desktop. Now go into your CMD again type
cd C:\Users\YOUR_NAME\Desktop\compass-test. Now you’re in the “compass-test” folder. Next step is to create a compass project. Type
compass create. If everything went well you should see the following.
directory sass/ directory stylesheets/ create config.rb create sass/screen.scss create sass/print.scss create sass/ie.scss write stylesheets/ie.css write stylesheets/print.css write stylesheets/screen.css ********************************************************************* Congratulations! Your compass project has been created. You may now add and edit sass stylesheets in the sass subdirectory of your project. Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets. You can configure your project by editing the config.rb configuration file. You must compile your sass stylesheets into CSS when they change. This can be done in one of the following ways: 1. To compile on demand: compass compile [path/to/project] 2. To monitor your project for changes and automatically recompile: compass watch [path/to/project] More Resources: * Website: http://compass-style.org/ * Sass: http://sass-lang.com * Community: http://groups.google.com/group/compass-users/ To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage: <head> <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> <![endif]--> </head>
Now your new project is ready. Before you make changes in your project you need to run the last command which is
compass watch. With this command, you tell compass to watch changes what you make in
You’re all set and ready to write clean and organized CSS. If you’re new to SASS, SCSS please read my previous post about SASS and SCSS.
Dont' forget to like or share this post if you found it useful. Thank you!