1. Big Frontends
Made Simple
With Sass & Compass

2. {less} vs. Sass
Compass
Structuring Projects
Handling Browsers

3. http://sass-lang.org
http://github.com/nex3/haml
Combined with Haml
Overview
http://lesscss.org
https://github.com/cloudhead/less
Inspired by Sass

4. gem install haml
Installation
gem install less

5. gem install?
try
http://www.ruby-lang.org/en/downloads/
first

6. sass style.sass style.css
css2sass style.css
style.sass
Running
lessc style.less

7. haml --rails your/app
Ruby on Rails
http://github.com/
cloudhead/more

8. .class div
:color blue
or:
.class div
color: blue
Syntax
.class div {
color: blue;
}

9. Result
.class div {
color: blue;
}

10. .class
:color blue
div
:color red
Cascading
.class {
color: blue;
div {
color: red;
}
}

11. Result
.class {
color: blue;
}
.class div {
color: red;
}

12. !pink = #c322bd
#pink
:color = !pink
:background red
Variables
@pink: #c322bd;
#pink {
color: @pink;
background: red;
}

13. Result
#pink {
color: #c322bd;
background: red;
}

14. =red-text
:color red
#important
:font-weight bold
+red-text
Mix-Ins (1)
.red-text {
color: red;
}
#important {
font-weight: bold;
.red-text;
}

15. Result
#important {
font-weight: bold;
color: red;
}

16. Mix-Ins (2)
.red-text(@color: red) {
color: @color;
}
#important {
font-weight: bold;
.red-text(green);
}
=red-text(!color = "red")
:color = !color
#important
:font-weight bold
+red-text("green")

17. Mix-Ins (3)
.red-text {
color: red;
a {
color: blue;
}
}
#important {
.red-text;
}
=red-text
:color red
a
:color blue
#important
+red-text

18. Mix-Ins (4)
.red-text(@color: red) {
color: @color;
a {
color: blue;
}
}
#important {
.red-text(green);
}
=red-text(!color = "red")
:color = !color
a
:color blue
#important
+red-text("green")
won’t work
with variables

19. Mix-Ins (5)
.hover-link {
text-decoration: none;
:hover {
text-d…: underline;
}
}
#important a {
.hover-link;
}
= hover-link
:text-decoration none
&:hover
:text-d… underline
#important a
+hover-link

20. height: 22px / 2;
color: #fff * 3;
background-position:
10px 30px / 2;
:height = 22px / 2
:color = #fff * 3
:background-position
= 10px 30px / 2
Math
won’t work as expected

21. =color(!x = 0)
@if !x < 0
:color red
@else
:color black
#colorful
+color(-1)
If Blocks
?

22. @for !i from 1 through 3
.number-#{!i}
:background =
"url(number-#{!i}.png)"
Loops
?

23. :width = percentage(100px / 50px)
:color = hsl(120, 100%, 50%)
:height = floor(21px / 2)
Functions (1)
?

24. !c1 = #a3b400
!c2 = #2300ae
!c3 = mix(!c1, !c2)
!c4 = mix(!c1, !c2, 30%)
!c5 = darken(!c1, 10%)
!c6 = desaturate(!c1, 5%)
!c7 = complement(!c1)
Functions (2)
? Sass 3.0
till then:
gem install compass-colors

25. · Good for developers
· Mix-ins just work
· Good for people who hate {, } and ;
— p. e. German keyboard users
· New features come out frequently
· Syntax changes frequently
· More complex syntax
· Annoying “=”
Overview
· Easy to learn
· Better syntax for variables
· Classes used as a mix-in won’t be
rendered (maybe confusing)
· Still complicated CSS syntax with
{, } and ;
· Problems with variables in mix-ins
· No consistent use of cascading
+
–
+
–

26. One more thing.

27. {less} vs. Sass
Compass
Structuring Projects
Handling Browsers

28. Compass
· Like Gems for Sass
· http://github.com/chriseppstein/
compass/
· gem install compass

29. Setup for Rails
rails app -m http://compass-style.org/rails/installer
rake rails:template LOCATION=http://compass-style.org/
rails/installer
===================================================
Welcome to the Compass Installer for Ruby on Rails!
===================================================
What CSS Framework do you want to use with Compass? (default: 'blueprint')
blueprint
Where would you like to keep your sass files within your project?
(default: 'app/stylesheets')
Where would you like Compass to store your compiled css files?
(default: 'public/stylesheets/compiled')
public/stylesheets

30. Project

31. Blueprint

32. Using Blueprint
!blueprint_grid_columns = 24
!blueprint_container_size = 950px
!blueprint_grid_margin = 10px
@import blueprint/modules/grid.sass
#teaser
+column(4)

33. How Does It Work?

34. Open the Gem

35. Extend It Yourself.

36. Own Gems

37. Overview
· Modular structure
· Mix different frameworks
· Uses only code needed (small CSS files)
· Easy to extend as Gem
· No silly formatting classes needed
(e. g. “.two-colums”)

38. {less} vs. Sass
Compass
Structuring Projects
Handling Browsers

39. Folders
app
stylesheets
basics
Grid, typography, colors, borders, common mix-ins
partials
Elements used on the side
plugins
External converted (css2sass) stylesheets (e. g. jQuery plugins)

40. File Names
screen.sass
basics/_grid.sass
basics/_typography.sass
basics/_borders.sass
partials/_header.sass
partials/_boxes.sass
plugins/_lightbox.sass
Files prefixed with underscore won’t be rendered
as CSS, but will be available for including.

41. Ex. moviepilot.de

42. Naming Conventions
· sample-class, sample_class or
sampleClass
· Dash case is preferred in CSS
· More important: be consistent

43. {less} vs. Sass
Compass
Structuring Projects
Handling Browsers

44. ie.css?
· You’ll just forget what you’ve done.

45. Browser Hacks?
ul.bad-styling
li
:padding 5px
:*padding-left 7px

46. Or Valid CSS?
ul.bad-styling
li
:padding 5px
.trident &
:padding-left 7px

47. Other Browsers
ul.bad-styling
li
:padding 5px
.trident &
:padding-left 7px
.webkit &
:color red
.gecko &
:display none

48. Set Browser Class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nico Hagenburger</title>
<link href="/stylesheets/screen.css?1264808640"
media="screen" rel="stylesheet" type="text/css">
</head>
<body class="webkit">
</body>
</html>

49. Overview
· Every browser fix is close to the normal
definition
· Works with Safari, Firefox and Opera
· Valid CSS
· Only one HTTP request
· No conditional comments needed

50. Any questions?

51. nico@hagenburger.nete-mail
twitter
blog
first name
last name