3 Steps to Make Better & Faster Frontends with SCSS/Sass, Compass and Lemonade for CSS sprites. I gave this talk at Railscamp Germany 4.

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