The file can be found at ~\Ruby192\lib\ruby\gems\1.9.1\gems\compass-0.11.4\frameworks\compass\stylesheets\compass\css3

on my laptop it was C:\Ruby192\lib\ruby\gems\1.9.1\gems\compass- 0.11.4\frameworks\compass\stylesheets\compass\css3

Correct [line 106]

if($transition-3, $transition-3, $default-transition-fuciton)

With

if($transition-3, $transition-3, $default-transition-function)

As you can see at the end of the original “function” is spelled incorrectly, consequently stopping your .scss file from generating. Simply making this correction should resolve any generating problems such as the one I had.

The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#20425e, #336a98 4%, #3d7fb6))

The change works and is implemented like so ...

@include background-image(linear-gradient(color-stops(darken($base_color, 30%), darken($base_color, 15%) 4%, darken($base_color, 7%))));

1. Download and install Ruby (google: “Ruby installer windows” ). When installing, select the two check boxes: adding executables to PATH, and associate *.rb files to Ruby.

2. Download Ruby Gems (google: “Ruby Gems”). Uncompress and run Instal.rb

3. Now you are ready to run start this tutorial and run the follwing command lines (on the top of this page):

C:\> gem install haml
Successfully installed haml-3.0.25
1 gem installed
Installing ri documentation for haml-3.0.25…
Installing RDoc documentation for haml-3.0.25…
C:\>

and

C:\> gem install compass
Successfully installed compass-0.10.6
1 gem installed
Installing ri documentation for compass-0.10.6…
Installing RDoc documentation for compass-0.10.6…
C:\>


Color manipulation seems to be the greatest use of variable css. like “give me the main color but 50% lighter”

Nice stuff though.

I was looking about a way to easier my life with css and i discover this week, less, then saas then the html5 boiler plate project.

I’m on mac so there’s an “less app” that compile automatically .less in .css when we save less file in the IDE.

I didn’t try saas at the moment but i will try.

What do you think about turbine project ?
http://turbine.peterkroener.de/docs.php

Thanks a lot….

@Sergiu I tried this tutorial on a windows computer and it worked fine. The only difference is that you have to use your windows commandline (cmd.exe).
To install SASS and Compass just enter ‘gem install haml’ into your commandline to install SASS and ‘gem install compass’ to install compass. That’s the only difference. GOOD LUCK!

One little silly point I wanted to make though. From what I’ve been reading up on HTML5, there’s no need to include type, media, and charset in your CSS link code. HTML5 expects a style tag to be CSS now (as it does with script tags as well). Something I’ve picked up on the great Dive into HTML5 site (http://diveintohtml5.org/) and the new HTML5 for Web Designers book from Jeremy Keith. So far a great read.

We used Less for a previous project, but ended up moving to Sass

The Sass compiler was (is?) more mature, and the language feels more consistent (see the ‘&’ operator in Sass vs the :hover special case in Less). The editor/tool support was quite a bit better too.

Sass doesn’t have a javascript in-browser implementation (afaik), but for rapid development it can watch a folder/file for changes and automatically recompile to static CSS files.

Plus there’s a firebug plugin, so you get Sass line numbers / references instead of compiled CSS line numbers: https://addons.mozilla.org/en-US/firefox/addon/103988/

@steffen Unlike Less, Sass offers true inheritance—what less provides is a mixin-like behavior that doesn’t always provide the expected effect when working with complex selectors. See here for more info: http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend

Now if SASS had a compiler in JS…

A few people asked about our choice of SASS over Less. In the beginning, we spent a fair amount of time debating this, and our decision boiled down to a few things:

* More people in the office were familiar with SASS than Less (I used to use Less myself).
* SASS seemed to build faster
* The color functions in SASS are more robust (one feature which we use very heavily)
* The compass extensions were quite useful

Again, these decision makers aren’t definitive, and Less is still a great, similar, alternative.

@Paul: I kind of feel the same way, in that there shouldn’t be competition that is this similar. From what I heard last night, there are a lot of architectural differences, but on the surface, they’re still VERY similar. As mentioned, the color functions in SASS (and the Compass extensions) were the tipping points for us.

@Dustin: Thanks for the link on auto-compiling or “watching” directories. I wanted to get into some of that (and also how to set up Textmate to compile on save), but figured it was outside the scope of this article.

@Conor: We definitely have an advantage in Touch with the amount of CSS3 we can leverage, but we’re certainly exploring the possibility of using in Ext JS 4.

Though, I wonder why not LESS?
I was never an instant fan of SASS, rather an instant fan of LESS.

E.g. extending other classes by just writing
#header {
  .rounded_corners;
}
is pretty clever and beautiful I think, instead of using explicitly @extend.

Also using dashes in variable names feels more CSSy, and using @ more Ruby than PHP.

After all this is just syntax sugar stuff, still would be interesting to know why not Less?
By accident stumbled about this post of you in Google: http://9-bits.com/post/126438804/less-css

Either way, switching from pure CSS to a more clever CSS implementation is a brave and smart move.

Nah truly this is a great guide. SCSS makes sass so much more attractive now..
One thing I was hoping to get out of this.. can you explain the difference between sass and compass? I still don’t grok why they aren’t the same thing. :/

/Mats