Compass, Sass, and the Enlightened CSS Developer

Transcript

1. WYNNNETHERLAND COMPASS, SASS, AND THE ENLIGHTENED WEB

2. whoami

3. +

4. None

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

19. None

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

23. None

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!

110. None

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!