from good to great: 5 things you didn't know about compass and sass

From Good to Great.

5 things you didn't know you could do with Sass and

Compass

Hello.

#1: Smater Sprites

Sass helps you cut down on http requests.

Basic Sprite Example

Basic Sprite Example

+1 HTTP Request

These can add up.Weren't we using sprites to cut

down on HTTP requests in the first place?

inline-image function

inline-image sprite Example

inline-image sprite Example

inline-image sprite Example

OH SHI-

Over usage of this technique defeats the

purpose.

#2: Optimize for Some

Let your traffic patterns help you optimize your compiled css.

Chrome

Firefox

Chrome

Firefox

KHTML

Standard CSS3 mixin

Selective CSS3 Mixin

WARNINGThis might lead to over-optimization, but still

pretty cool.

#3: Coloring With Code

Sass functions that make color picking easier, directly in code.

Sass Color Functions

Sass Color Functions

Sass Color Functions

color = hex | rgba | firebrick

#4: @extend

Think Class Hierarchy, but for CSS!

Standard Mixin Pattern

Overweight.

is this CSS really what you'd do by hand?

New @extend Pattern

Less redundancy,smaller output code.

This feels more like what you'd write out naturally.

Cooler @extend Pattern

@extend works with cascade, @include works

around it.Write classes naturally, let

Sass manage selectors.

#5: $ sass-convert

Move you existing stylebase over to Sass, with a simple command.

$ sass-convert --help

...or, Just add an "s" to your

file..scss

RecommendationsDo NOT do this directly to your codebase. Copy it.

Check your file extensions.

Review the changes sass-convert made.

Try converting to SCSS(!)

compass-style.org/docs

compass-style.org/docsits a beta.

compass-style.org/docsits a beta.

You should contribute.

Thanks!