My issue with the article is that it really talks about SASS and not Compass, it doesn’t even show one example of the CSS3 features and it doesn’t explain the separation between the two and the benefits of using them.

Hopefully in this post I want to try and clear up what SASS is, what Compass is, and why, as a developer, you should let them into your life. This post won’t go into detail about each tool, but will hopefully just give you enough of a push to investigate further. The post will also try and deal with some of the common misconceptions I’ve heard and read from other developers.

WHAT IS SASS

SASS is simply an extension to existing CSS features. Some of the main features include:

• Variables
• Mixins
• Nesting
• Selector Inheritance

Some of features are so useful that they are being proposed to the CSS Working Group -CSSOM, Vars, Mixins, Nesting, and Modules.

Other useful features include:

• Control Directives (if, for, each, while)
• Colour operators
• Colour functions (incredibly useful for tweaking your colour palette)

Some developers originally ignored SASS because it used a different syntax to CSS, but a while ago this all changed with the release of the SCSS format. SCSS uses the exact same formatting as standard CSS, so if you can write CSS, you can write SCSS.

SASS isn’t the only tool that extends the capability of CSS, however once you add in the power of Compass it should be clear why developers should be choosing SASS above the other tools.

WHAT IS COMPASS

Compass is an open source CSS authoring framework that makes a developer’s life much easier.

If you want a simpler way to maintain your grid layouts, an easier way to remember all the variations in CSS3 syntax, and a way to reuse lots of standard CSS patterns quickly, then Compass is for you.

Compass is built on top of SASS, so you get all the benefits of SASS as well.

At it’s most simplistic level, Compass provides a huge amount of mixins that developers can use of to reduce the maintenance of their CSS.

Some of the main features of Compass include:

• Cross browser CSS3 mixins (stop trying to remember all those CSS3 browser variations)
• Common typography patterns
• Common styling patterns
• Built in spriting capabilities
• Blueprint module

Compass also has a number of plugins that can be added to the core features to give you even more to simplify your CSS. Some of the plugins are listed here, however doing a quick search on github will reveal quite a few more.

MISCONCEPTIONS

“BUT I DON’T WANT TO USE RAILS”

This is a pretty common argument for not using SASS or Compass. Yes, SASS and Compass rely on Ruby, but you don’t have to be using Ruby on Rails to use them. They are completely stand-alone tools and I’ve even used them when developing simple static pages. The only thing you do need is Ruby, as they are Ruby gems. The download page of the SASS site explains how to do that.

“BUT I DON’T WANT TO INSTALL RUBY ON MY SERVER”

Don’t then. Yes, you do need Ruby on your development machine, but that’s as far as you need to go. SASS compiles down to bog standard CSS so all you actually need to put onto your server is the generated CSS files.

“I DON’T LIKE SASS, I PREFER LESS”

In the Mashable article, one of the comments compares LESS and Compass. They are two completely different things. Sure compare LESS and SASS, but LESS and Compass are not comparable.

“BUT I CAN WRITE PROPER CSS FROM SCRATCH, I DON’T NEED SOMETHING TO DO THAT FOR ME”

As web developers we can all do that, but the point is that SASS and Compass offer us a way of writing more manageable code. I can guarantee you that when using these tools, you will be writing less code, changes will be quicker and easier, and therefore cheaper.

ADDITIONAL READING

This blog post deliberately doesn’t show many code examples, as there is just too much to cover. If you want to see some more specific examples, here are some useful references.

• SASS and Compass
• Style Guides Using Sass @extend
• SASS selector inheritance
• Cleaner 960.gs using SASS and Compass

FINISHING UP

So in short, SASS and Compass are here to make CSS creation and maintenance simpler and quicker, leaving you with time to do other things to make your sites even better.

This post doesn’t even scratch the surface of the capabilities of SASS and Compass, but hopefully it explains what they are and gives you a hint as to why you be using them as part of your development stack.

The big question is do you want to be maintaining code that looks like this?

 .box-shadow-example div { width: 40px; height: 40px; background: #eeeeee; margin: 20px; float: left; } #box-shadow-default { -moz-box-shadow: 0px 0px 5px #333333; -webkit-box-shadow: 0px 0px 5px #333333; -o-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; } #box-shadow-custom { -moz-box-shadow: red 2px 2px 10px; -webkit-box-shadow: red 2px 2px 10px; -o-box-shadow: red 2px 2px 10px; box-shadow: red 2px 2px 10px; } #box-shadow-custom-multiple { -moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; -webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; -o-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; } 

Or like this?

 @import "compass/css3"; .box-shadow-example div { width: 40px; height: 40px; background: #eeeeee; margin: 20px; float: left; } // Default single box shadow #box-shadow-default { @include single-box-shadow; } // Box shadow with custom settings #box-shadow-custom { @include box-shadow(red 2px 2px 10px); } #box-shadow-custom-multiple { @include box-shadow(rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset); }

• What are CSS Preprocessors?
• What is Sass?
• What is Compass?
• Why should I use Sass and/or Compass?
• How should I use Sass and/or Compass?
• How do I get up and running with Sass/Compass?
• How do I make Compass autogenerate sprites for me?

These questions and more will be answered in this presentation.

Repo with slides and the demo site

Repo with our base mixins

Sass is simply a different way to work with CSS. It allows you to keep your CSS code very simple and helps increase readability. It takes something like this:

And turns it into:

You can check out Sass at http://sass-lang.com/

What is Compass?

Compass makes working with Sass even easier. The author, Chris Eppstein, has also included some converted frameworks such as Blueprint, YUI, and 960.gs. It also easily integrates with Ruby based projects, but is just as easy to add to any other project. Compass is open-source and is extremely well documented. Check out the source and documentation.

Installation

Both Sass (which is part of the Haml Project) and Compass are installed through RubyGems. If you dont have any clue what I am talking about, check out “Step 1 – Installing Ruby on Rails” of my previous articleRuby on Rails for Designers, and follow the steps down until you hit the section named “Installing Rails”.

To install both of these gems, we can just run a single command:

As long as it says that it successfully installed both gems, you are good to go!

Project Setup

If you are working with a Ruby-based project then check out the documentation as it will explain how to get it working with your specific framework, but I’ll assume we are working with a simple HTML or the like project.

The compass command has a lot of options, and if you run compass –help, you might see:

FYI: The next to top line that says “Loading haml-edge gem.” is because I use the latest version, so you don’t need to worry about it if yours says something different.

Now we are going to start our Compass project. To create run the following command (including the trailing period, that tells compass where we want to make our project!)

And you should see:

Where initializing, Compass would normally default to having the Sass in a folder name src, but I wanted to change that so I added the option. If you look at the folder, you should see a file named config.rb and two other folders.

The config.rb is the configuration that Compass looks at, but most of the time you wont need to mess with this. Also, like the output from the creation command says, we have three ways of updating our CSS from our Sass:

• compass – using this option, you would have to be in the correct directory, and then Compass would compile your Sass once.
• compass -u path/to/project – this is about the same as the command as above, but you do not have to be in the project directory, and rather pass in it with the command.
• compass --watch [path/to/project] – this command is pretty awesome in that it watches for any changes to your Sass files and will automatically recompile them whenever a change is detected.

Now that you know how to setup a project, I’ll explain some of the “rules” of working with Sass

Sass Syntax

Normally when writing CSS, you would write something like:

One of the problems with that is that you are repeating the same name many times. Lets make this into Sass. I am going to be working in the screen.sass file, so delete everything and your Sass would like:

Personally, that it much easier to read and write this way, no curly braces or semicolons. The way that Sass understand the nesting is through indentation.

The first selector is not indented at all so the final CSS with start with that. Also, all properties, (so color, height width, etc) begin with a colon. So for the properties for #header they are indented. It does not matter if you use tabs or spaces, but you must remain consistent, otherwise you will see an error (which I’ll show in just a minute).

So now that you have your properties, we have our next selector. Since this is indented to the same as the properties, the CSS output will be #header a ...

Now that we are this far, lets try compiling: (in your project directory)

Let’s say that you didn’t indent everything the same, Compass would error:

Now, once you know CSS, Sass wont be very much of a learning curve, as the main difference when getting started is the different formatting rules. Next, we will get working with some of the more advanced (but cooler!) parts of Sass.

Features of Sass

Variables

One awesome feature of Sass is it’s ability to use variables. An example:

Compiling this, would give you:

Math

You may be laughing at this title, but its true, you can do math in Sass! For this demonstration, we will be using Sass’s interactive mode, so run:

And a little messing around would give you:

Or a more visual approach:

#111 – #999 = #000

#111 + #999 = #aaa

#398191 + #111 = #4a92a2

#398191 – #111 = #287080

Apart from addition and subtraction, you can also multiply and divide:

#398191 / 2 = #1c4048

#398191 * 2 = #72ffff

To exit the Sass interactive mode, keypress Control-C, and then type “end”, and press enter.

Mixins

If you have ever heard of keeping your code DRY, DRY means “don’t repeat yourself.” Mixins allow you to do just that. For example, with the gaining popularity of rounded corners, you may want to create a mixin to handle that, so somewhere, (not under a selector) you would add:

And to use, you would do something like:

And when compiled:

Lets say though, you may want the border radius to be variable – well you can have a mixin expect to be passed some values. Changing our mixin, it would look like:

And then to use you could use what we did before, and then the value would default to 4px, otherwise:

Importing

Sass also has the ability to import other Sass files, so lets say you wanted to import a file (in the same as this sass file), you would add:

This feature is really nice in giving you the ability the keep extraneous styles outside your main file. For example, you could also keep a mixins sass file that you copied around projects and then a simple import would add that code it – no copy and paste.

Conclusion

I hope you understand the basics of using Sass and Compass and will possibly use it in your next project! Now, if you are like I was when I found Sass, and said “I don’t need this!”, give it a try. I’ve switched over to it for all of my recent projects and I really enjoy working with it.

Source: http://net.tutsplus.com