1.
3 Steps to Make
Better & Faster
Frontends

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

3.
gem install haml

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

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

6.
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)

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

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

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

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

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

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

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

14.
@extend
=
inverse mixin

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

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

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

18.
gem install
compass

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

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

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

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

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

24.
gem install
lemonade

25.
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)

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

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

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

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

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

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

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

33.
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;

34.
Any questions?

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

36.
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

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