from good to great: 5 things you didn't know about compass and sass
DESCRIPTION
From Good to Great: 5 things you didn't know about Compass and Sass.TRANSCRIPT
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!