3 Steps to Make
Better & Faster
Frontends

SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites

gem install haml

Variables
$my-color: #ab42ef;
body {
background: $my-color;
}

Color Calculations
h1 {
background:
lighten($my-color, 23%);
color:
darken(#c24, 10%);
border-color:
desaturate(red, 50%);
}

Color Functions
★ opacify(color, amount)
★ transparentize(color, amount)
★ lighten(color, amount)
★ darken(color, amount)
★ saturate(color, amount)
★ desaturate(color, amount)
★ adjust-hue(color, degrees)
★ mix(color1, color2, weight)
★ grayscale(color)
★ complement(color)

RGBA Colors
h2 {
background: rgba(#00f, 0.7);
}
R, G, B
#hex
colorconst
$variables

Cascading
h1 {
color: red;
a {
color: blue;
}
}

Mixins
@mixin my-style {
background: red;
}
.my-box {
@include my-style;
}

Mixin Parameters
@mixin my-style($color: red) {
background: darken($color, 5%);
}
.my-box {
@include my-style(#ff0);
}

Cascading Mixins
@mixin my-style {
a {
background: red;
}
}
.my-box {
@include my-style;
}

Extending
.box {
background: red;
}
.bordered-box {
border: 1px black solid;
@extend .box;
}

Result
.box, .bordered-box {
background: red;
}
.bordered-box {
border: 1px black solid;
}

@extend
=
inverse mixin

Alternative Syntax
=my-style($color: red)
background: darken($color, 5%)
.my-box
color: red
+my-style(#ff0)
a, *.scss
span
color: blue *.sass

More to Learn
★ Include partials
(no asset packer needed)
★ Auto compress CSS files
★ @if, @for, @while syntax
★ “&” as current cascading placeholder

SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites

gem install
compass

CSS3
@import "compass";
.box {
background: red;
@include border-radius(4px);
@include box-shadow(
rgba(#ccc, 0.5),
3px, 3px, 5px));
}

Helpers
h1 {
@include ellipsis;
@include clearfix;
}
a {
@include hover-link;
}

Frameworks
@import "blueprint";
@include blueprint;
.box {
@include column(3);
}

More to Learn
★ Easy to extend with your own gem
★ Use other frameworks
(960gs, suzy, YUI, YAML, jqTouch, …)
★ Write own frameworks

SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites

gem install
lemonade

Simple Sprites
.add {
background:
sprite-image("icons/pl.png");
}
.remove {
background:
sprite-image("icons/rm.png");
}
all icons by p.yusukekamiyamane.com (CC by 3.0)

Output
.add {
background:
url("icons.png");
}
.remove {
background:
url("icons.png") 0 -16px;
}

Right Aligned
.something {
background:
sprite-image("i/wide.png");
}
a.next {
background: yellow no-repeat
sprite-image("i/n.png", 100%);
padding-right: 20px;
}

Result
.something {
background:
url("i.png");
}
Example link
a.next {
background: yellow no-repeat
url("i.png") 100% -20px;
padding-right: 20px;
}

Empty Space
.add {
background:
sprite-image("icons/pl.png");
}
.remove {
background: yellow no-repeat
sprite-image("icons/rm.png");
padding: 20px;
}

Could be Better
.add {
background:
url("icons.png");
}
.remove { Example link
background:
url("icons.png") 0 -16px;
padding: 20px;
}

Empty Space
.add {
background:
sprite-image("icons/pl.png");
}
.remove {
background: yellow no-repeat
sprite-image("icons/rm.png",
0, 0, 20px);
padding: 20px; }

Just Perfect
.add {
background:
url("icons.png");
}
.remove { Example link
background:
url("icons.png") 0 -36px;
padding: 20px;
}

Sprite Generation
★ Sprite image named by directory:
“icons/*.png” > “icons.png”
★ Background position added only if needed
★ Add “no-repeat” by yourself:
background:
sprite-image("…") no-repeat;

Any questions?

Happy forking:
http://github.com/nex3/haml
http://github.com/chriseppstein/compass
http://github.com/hagenburger/lemonade

Further reading:
http://www.sass-lang.com
http://www.compass-style.org/docs/
http://www.hagenburger.net/BLOG/
Lemonade-CSS-Sprites-for-Sass-
Compass.html

last name
first name
nico@hagenburger.net
e-mail
twitter
blog