Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compass, Sass, and the Enlightened CSS Developer

7e19cd5486b5d6dc1ef90e671ba52ae0?s=47 Wynn Netherland
September 17, 2011

Compass, Sass, and the Enlightened CSS Developer

7e19cd5486b5d6dc1ef90e671ba52ae0?s=128

Wynn Netherland

September 17, 2011
Tweet

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!