1.
Patrick Crowleyhttp://github.com/mokolabs

2.
Getting oriented with Compass

3.
What is Compass?

4.
• Framework for stylesheets

5.
• Framework for stylesheets• Uses Haml & Sass

6.
• Framework for stylesheets• Uses Haml & Sass• Well, really just Sass

7.
• Framework for stylesheets• Uses Haml & Sass• Well, really just Sass• Lightweight

8.
Why do we needto use Compass?

9.
• Stylesheets are too long

10.
• Stylesheets are too long• Stylesheets are too complex

11.
• Stylesheets are too long• Stylesheets are too complex• Stylesheets are a fucking mess!

12.
• Stylesheets are too long• Stylesheets are too complex• Stylesheets are a fucking mess!• Yeah, I’m talking to you.

13.
But what if...

14.
• I wanna use ERB

15.
• I wanna use ERB• I think Sass has a weird syntax

16.
• I wanna use ERB• I think Sass has a weird syntax• My styles are hand-crafted

17.
• I wanna use ERB• I think Sass has a weird syntax• My styles are hand-crafted• I don’t have many styles yet

18.
How do I get started?

19.
• gem ‘compass’

20.
• gem ‘compass’• bundle install compass

21.
• gem ‘compass’• bundle install compass• compass version

22.
• gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app

23.
• gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app• tweak config/compass.rb

24.
• gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app• tweak config/compass.rb• add app/stylesheets

25.
What are the basics?

26.
.SCSS files

27.
SCSS = Sassy CSS

28.
.scss .css

29.
app/stylesheets/app.scssbody { font-family: Helvetica, Arial, sans-serif;}h1 { font-size: 28px; a { text-decoration: none; }}a { color: #FF1E00; &:hover { color: #336699; }}

30.
public/stylesheets/app.cssbody { font-family: Helvetica, Arial, sans-serif;}h1 { font-size: 28px;}h1 a { text-decoration: none;}a { color: #FF1E00;}a:hover { color: #336699;}

31.
Variables

32.
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

33.
.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

34.
Partials

35.
app/stylesheets/app.scssbody { font-family: Helvetica, Arial, sans-serif;}@import "core/type";

36.
app/stylesheets/core/type.scssh1, h2, h3, h4, h5 { color: #444; margin: 12px 0;}h1 { font-size: 28px; margin: 24px 0;}h2 { clear: left; font-size: 24px; margin: 18px 0;}

37.
public/stylesheets/app.cssbody { font-family: Helvetica, Arial, sans-serif;}h1, h2, h3, h4, h5 { color: #444; margin: 12px 0;}h1 { font-size: 28px; margin: 24px 0;}h2 { clear: left; font-size: 24px; margin: 18px 0;}

38.
Mixins

39.
@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}

40.
.page-title { @include large-text; padding: 4px; margin-top: 10px;}

41.
.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px;}

42.
Compass =Mixins on Charlie Sheen

43.
WINNING!

44.
• New CSS 3 hotness

45.
• New CSS 3 hotness• Blueprint

46.
• New CSS 3 hotness• Blueprint• Yahoo UI layouts

47.
• New CSS 3 hotness• Blueprint• Yahoo UI layouts• Grid systems

48.
• New CSS 3 hotness• Blueprint• Yahoo UI layouts• Grid systems• Fancy buttons

49.
input[type=text],input[type=password],textarea { @include border-radius(6px); border: 1px solid #ccc; color: #333; font-size: 16px; padding: 3px; outline: none;}

50.
How do I organize my stylesheets?

51.
app/stylesheets/app.scss// Compass@import "compass/reset";@import "compass/utilities";@import "compass/css3";// Libraries@import "lib/jquery-ui";// Core@import "core/mixin";@import "core/colors";@import "core/tag";@import "core/layout";@import "core/message";@import "core/form";@import "core/widget";// Features@import "features/product";@import "features/user";

52.
Resources

53.
• http://compass-style.org

54.
• http://compass-style.org• http://compass-style.org /docs/reference/compass/

55.
• http://compass-style.org• http://compass-style.org /docs/reference/compass/• http://github.com /chriseppstein/compass

56.
The End