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
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
KHTML
Firefox

Standard CSS3 mixin

Selective CSS3 Mixin

WARNING
This 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
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

Recommendations
Do 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

its a beta.

its a beta.
You should contribute.

Thanks!

http://blog.derekperez.com	243
http://andted.tumblr.com	7
http://safe.tumblr.com	3

From Good to Great: 5 things you didn't know about Compass and Sass.

by perezd

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 253

Statistics

From Good to Great: 5 things you didn’t know about Compass and Sass. Presentation Transcript