Compass, Sass, and the Enlightened CSS Developer

1. WYNNNETHERLAND COMPASS, SASS, AND THE ENLIGHTENED WEB
2. whoami
3. +
5. Native Oklahoman Naturalized Texan or “Okie” in the local vernacular.
6. Like you, I work on the Interwebs.
7. ... but my story begins in
8. the DARK AGES
9. Literally. this still works : brew install lynx
10. gopher:// look it up, kids. anyone?
11. Flight of the Navigator technology from the future!
12. These were perilous times.
13. Full of strange magic.
14. <font>
15. <center>
16. <blink>
17. <table> <tr> <td valign=top>Remember this?</td> <td> <table> <tr> <td>And this?</td> </tr> </table> </td> </tr> </tr> </table> Nested tables FTW.
18. JavaScript vs. JScript
20. Sometimes we’d hide these and update the page without a refresh, back when Ajax was something Momma used to clean the bathtub.
21. DOM level 0.
22. document.formName.inputName
24. Why am I sharing all this?
25. Consider it inoculation against CURMUDGEONRY.
26. THAT’S THE WAY IT WAS AND WE LIKED IT.
27. “GET OFF MY LAWN.” Nathan Smith Creator, 960.gs RefreshOKC headliner Reformed Curmudgeon
28. Back to our story
29. the RENAISSANCE
30. JavaScript Frameworks
31. CSS Frameworks
32. HTML5
33. CSS3
34. border-radius
35. border-image
36. www.zurb.com/playground/awesome-overlays
37. background-size
38. gradients
39. RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black!
40. text-shadow
41. box-shadow
42. word wrap
43. outline
44. columns
45. @font-face Typographic freedom! means
46. New selectors Cool
47. * E .class #id E F E > F E + F E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value] :first-child :link :visited :lang() :before ::before :after ::after :first-letter ::first-letter :first-line ::first-line E[attribute^=value] E[attribute$=value] E[attribute*=value] E ~ F :root :last-child :only-child :nth-child() :nth-last-child() :first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type() :empty :not() :target :enabled :disabled :checked CSS3 selectors (and some golden oldies) :header Steal this from jQuery, please
48. This is not a talk about CSS Follow @smashingmag for your CSS tips & tricks
49. REAL stylesheet innovation I want to talk about
50. HOW we write stylesheets I want to talk about
51. how we MAINTAIN stylesheets I want to talk about
52. how we SIMPLIFY stylesheets I want to talk about
53. We're gonna see a brave new world where they run everybody a wire and hook us all up to a grid. Yes, sir, a veritable age of reason. Like the one they had in France. Not a moment too soon. ~ Ulysses Everett McGill
54. the AGE OF ENLIGHTENMENT
55. Sass
56. Syntax options
57. table.users { tr { td { background: #d1d1d; a { color: #111; } } } } Syntax options - SCSS Sassy CSS!
58. table.users tr td background: #d1d1d a color: #111 Syntax options - Indented I — whitespace
59. Nested rules
60. table.users tr td a {color: #111} table.users tr.alt td a {color: #333} Nested rules - selectors
61. table.users tr td a color: #111 td.alt a color: #333 Nested rules - selectors Look, Ma, no braces or semicolons But you can use both if you wanna
62. table.users tr td color: #111 &.alt color: #333 &:hover color: #666 Nested rules - selectors Change this ... and you change these
63. .users font: size: 1.2em style: italics weight: bold Nested rules - properties
64. Variables
65. .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Variables
66. !gray = #333 !default_border = 2px .user background: = !gray border-size: = !default_border .owner background: = !gray border-size: = !default_border .admin background: = !gray + #333 border-size: = !default_border + 2px Variables Even math! and color mixing!
67. Variables $font-apres: Apres, Arial, sans-serif $dark-gray: #1e1e1e !default $body-text: #bbb !default $strong-text: lighten($body-text, 40%) $muted-text: darken($body-text, 40%) $content-background: #fff $content-text: #555 $content-border: #ccc $form-background: rgba(0, 0, 0, .5) $blue-primary: #6095c2 $blue-secondary: #1742db $green-primary: #64b900 $green-secondary: #298527 $pink-primary: #f44ab7
68. Mixins
69. .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Mixins
70. =frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px style: solid color = !border_color .avatar +frame position: absolute top: 5px left: 5px p img +frame(1px, #ccc) Mixins defines the mixin mixes in the rules
71. Selector inheritance
72. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Selector inheritance
73. .flash padding: 5px border-width: 1px font-weight: bold .error.flash color: #8a1f11 background: #fbe3e4 .notice.flash color: #514721 background: #fff6bf Selector inheritance
74. .flash, .error, .notice { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Selector inheritance now we can use a single class in our markup
75. Imports
76. @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) Imports parent + 3 @imports = 4 http requests
77. @import reset.sass # _reset.sass @import typography.sass # _typography.sass @import layout.sass # _layout.sass Imports Included at compile time - just one http request
78. Imports + Mixins Now it gets fun!
79. @import compass/css3.sass .callout +border-radius(5px) +linear-gradient("left top", "left bottom", #fff, #ddd) .callout { -moz-border-radius: 5px; -webkit-border-radius: 5px; -border-radius: 5px; background-image: -moz-linear-gradient(top, bottom, from(#fff), to (#ddd)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #ddd)); } Compass CSS3 mixins very different syntax
80. css3/border_radius.sass css3/inline_block.sass css3/opacity.sass css3/text_shadow.sass css3/box_shadow.sass css3/columns.sass css3/box_sizing.sass css3/gradient.sass css3/background_clip.sass css3/background_origin.sass css3/background_size.sass css3/font_face.sass css3/transform.sass css3/transition.sass Compass CSS3 mixins
81. Bring your favorite CSS Framework
82. <div id='wrapper' class="container"> <div id='content' class="span-7 prepend-1"> <div id='main' class="container"> ... </div> <div id='featured' class="span-5 last"> ... </div> </div> <div id='sidebar' class="span-3 append-1 last"> ... </div> </div> A Blueprint example boo
83. @import blueprint/reset.sass @import partials/base.sass @import blueprint @import blueprint/modules/scaffolding.sass #wrapper +container #content +column(7) +append(1) #featured +column(5, true) #sidebar +column(3, true) +prepend(1) A Blueprint example
84. Functions
85. Very. Powerful. Functions.
86. hue(#cc3) => 60deg saturation(#cc3) => 60% lightness(#cc3) => 50% adjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329 grayscale(#cc3) => desaturate(#cc3, 100%) = #808080 complement(#cc3) => adjust-hue(#cc3, 180deg) = #33c mix(#cc3, #00f) => #e56619 mix(#cc3, #00f, 10%) => #f91405 mix(#cc3, #00f, 90%) => #d1b72d Sass 2.4 color functions http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
87. mix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875) mix(rgba(51, 255, 51, 0.90), #f00) => rgba(163, 114, 22, 0.95) alpha(rgba(51, 255, 51, 0.75)) => 0.75 opacity(rgba(51, 255, 51, 0.75)) => 0.75 opacify(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85) fade-in(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85) transparentize(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65) fade-out(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65) Sass 2.4 color functions with alpha support! http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
88. Who makes this syntactic sugar?
89. Sass and Compass CSS extensions & compiler Patterns & plugins
90. ...like peas and carrots.
91. $ sudo gem install haml $ sudo gem install compass --pre CALL IT FROM THE COMMAND LINE $ sass screen.sass screen.css OR COMPASS-IZE YOUR PROJECT $ compass --rails -f blueprint OR WATCH A FOLDER $ compass --watch Sass and Compass
92. A quick survey of Compass
93. Blueprint
94. Blueprint ★ Buttons ★ Colors ★ Debug ★ Fancy Type ★ Form ★ Grid ★ Interaction ★ Internet Explorer ★ Link Icons ★ Liquid ★ Print ★ Reset ★ Rtl ★ Scaffolding ★ Typography ★ Utilities
95. CSS3
96. CSS3 ★ Appearance ★ Background Clip ★ Background Origin ★ Background Size ★ Border Radius ★ Box ★ Box Shadow ★ Box Sizing ★ CSS3 Pie ★ Columns ★ Font Face ★ Gradient ★ Images ★ Inline Block ★ Opacity ★ Shared Utilities ★ Text Shadow ★ Transform ★ Transform (legacy) ★ Transition
97. Image sprites
98. @import "icon/*.png" .actions .new +icon-sprite(new) .edit +icon-sprite(edit) .save +icon-sprite(save) .delete +icon-sprite(delete) Image sprites .icon-sprite, .actions .new, .actions .edit, .actions .save, .actions .delete { background: url('/images/icon-34fe0604ab.png') no-repeat; } .actions .new { background-position: 0 -64px; } .actions .edit { background-position: 0 -32px; } .actions .save { background-position: 0 -96px; } .actions .delete { background-position: 0 0; } @import "icon/*.png" public/images/icon/new.png public/images/icon/edit.png public/images/icon/save.png public/images/icon/delete.png 1. 2. 3. I like the Sprite in you®
99. URL helpers
100. #nav background: image-url("nav_bg.png") repeat-x top center DEVELOPMENT #nav { background: url("/images/nav_bg.png") repeat-x top center; } PRODUCTION #nav { background: url("http://assets.example.com/images/nav_bg.png") repeat-x top center; } URL helpers relative paths for development, absolute for production
101. stylesheet-url($path) font-url($path) image-url($path) URL helpers
102. Share your patterns
103. http://brandonmathis.com/projects/fancy-buttons/
104. @import "fancy-buttons" button, a.button +fancy-button(#2966a8)
105. compass-960
106. $ninesixty-columns: 16 #wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omega Compass 960 https://github.com/chriseppstein/compass-960-plugin
107. compass-wordpress
108. $ gem install compass-wordpress CRANK OUT A NEW SASS-Y WORDPRESS THEME $ compass -r compass-wordpress \ -f wordpress -p thematic \ --sass-dir=sass --css-dir=css \ -s compressed my_awesome_theme AUTOCOMPILE YOUR CHANGES $ compass --watch Compass and WordPress shameless plug
109. compass-formalize Announcing!
111. INSTALL THE GEM $ gem install compass_formalize CREATE THE COMPASS PROJECT $ compass create my-great-app -r compass_formalize $ cd my-great-app APPLY THE PATTERN $ compass install formalize/jquery Compass and Formalize
112. Stats
113. Stats | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | | Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Rules | CSS Properties | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | | app/stylesheets/_960.sass | 198 | 141 | 0 | 0 | -- | -- | | app/stylesheets/_animation.sass | 2 | 2 | 0 | 0 | -- | -- | | app/stylesheets/application.sass | 268 | 607 | 0 | 33 | 1131 | 3684 | | app/stylesheets/_data_table.sass | 39 | 66 | 0 | 4 | -- | -- | | app/stylesheets/_datepicker.sass | 125 | 242 | 0 | 0 | -- | -- | | app/stylesheets/_formalize.sass | 82 | 78 | 0 | 4 | -- | -- | | app/stylesheets/_forms.sass | 227 | 242 | 0 | 21 | -- | -- | | app/stylesheets/ie.sass | 0 | 0 | 0 | 0 | 0 | 0 | | app/stylesheets/_jscrollpane.sass | 20 | 43 | 0 | 0 | -- | -- | | app/stylesheets/_prettify.sass | 16 | 16 | 0 | 0 | -- | -- | | app/stylesheets/print.sass | 0 | 0 | 0 | 0 | 0 | 0 | | app/stylesheets/_reset.sass | 111 | 18 | 0 | 0 | -- | -- | | app/stylesheets/_text.sass | 27 | 18 | 0 | 0 | -- | -- | | app/stylesheets/_tiptip.sass | 19 | 40 | 0 | 0 | -- | -- | | app/stylesheets/_util.sass | 56 | 54 | 0 | 0 | -- | -- | | app/stylesheets/_vars.sass | 0 | 6 | 2 | 0 | -- | -- | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- | | Total (16 files): | 1190 | 1573 | 2 | 62 | 1131 | 3684 | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
114. Isn’t she Sassy, folks? GET THE BOOK.
115. sass40 Save 40% and get early access! Sadly, sass100 is not a valid code.
116. Resources sass-lang.com beta.compass-style.org wynn.fm/okc blog: wynnnetherland.com twitter: @pengwynn email: wynn@hp.com linkedin.com/in/netherland and thanks for having me! grab the slides!