Why CSS Preprocessors Matter

67bb0a8cd6c1993dba0bfe302852f729?s=47 jina
October 05, 2012

Why CSS Preprocessors Matter

ConvergeFL

67bb0a8cd6c1993dba0bfe302852f729?s=128

jina

October 05, 2012
Tweet

Transcript

  1. Why CSS Preprocessors Matter Jina Bolton // Product Designer //

    Do ConvergeFL // 2012
  2. None
  3. A fractured process makes for a fractured user experience.” ”

    —Nate Fortin
  4. Create pages

  5. Create pages

  6. Create systems

  7. It used to be that designers made an object and

    walked away. Today the emphasis must shift to designing the entire life cycle.” ” —Paul Sa o
  8. CSS Preprocessors

  9. Language ! Compilation ! CSS

  10. DRY Development

  11. Patterns & Proportions

  12. Easier maintainability

  13. Stylus

  14. None
  15. sass-lang.com

  16. compass-style.org

  17. Should I choose Sass or SCSS?

  18. SCSS Write normal CSS, then add on the extra features.

    Want to write code like CSS?
  19. @mixin sidebar { background: #eee; @include message; }

  20. Sass No curly braces, no semi colons, indented, whitespace-sensitive Want

    to write minimal code?
  21. =sidebar background: #eee +message

  22. Sass, not SASS!

  23. Common Misconceptions

  24. I don’t know how to use the command line.” ”

    You don’t have to.
  25. I don’t want to learn Ruby.” ” You don’t have

    to.
  26. livereload.com

  27. codekit.com

  28. compass.handlino.com

  29. mhs.github.com/scout-app

  30. I want my CSS file to be formatted pretty.” ”

    You should be compressing anyway.
  31. I’ll have to learn a whole new syntax.” ” Not

    necessarily.
  32. The person I hire may not know it.” ” Then

    hire someone else who does.
  33. Isn’t @import bad?” ” Sass imports are good.

  34. /* Main.css */ @import "typography.css"; @import "grid.css"; /* ...more css...

    */ CSS: 3 files Sass: 1 file
  35. Sass Benefits

  36. Nesting

  37. SCSS: Output: ul.items a { ... } ul.items:hover { ...

    } .ie-6 ul.items a { ... } ul.items a { ... &:hover { ... } .ie-6 & { ... } }
  38. SCSS: Output: ul.items { ... } @media print { ul.items

    { ... } } ul.items a { ... @media print { ... } }
  39. SCSS: Output: .sidebar { border: 1px solid #eee; border-top-color: #fff;

    border-left: 0; } .sidebar { border: 1px solid #eee { top-color: #fff; left: 0; } }
  40. Variables

  41. SCSS: Output: body { color: #444; } footer { background:

    #444; } $text: #444; $bg: $text; body { color: $text; } footer { background: $bg; }
  42. Mixins & Extend

  43. SCSS: Output: .module { padding: 1em; } .info { padding:

    2em } @mixin spacing($s: 1em) { padding: $s; } .module { @include spacing; } .info { @include spacing(2em); }
  44. SCSS: Output: .message, .error { ... } .message.alert, .error.alert {

    ... } .error { ... } .message { ... &.alert { ... } } .error { ... @extend .message; }
  45. Placeholder Selectors

  46. SCSS: Output: .module, .sidebar { color: #444; } .sidebar, .main

    { width: 240px; } .module { color: #444; } %grid-1 { width: 240px; } .sidebar { @extend .module; @extend %grid-1; } .main { @extend %grid-1; }
  47. Color Functions

  48. $text: #444 color: lighten($text, 5%); color: darken($text, 5%); color: saturate($text,

    5%); color: adjust-hue($text, 180); color: grayscale($text); color: mix($text, #fff);
  49. sassme.arc90.com/

  50. Commenting Options

  51. SCSS: Output: /* Multiline comment; appears in output */ /*

    Multiline comment; appears in output */ // Singleline comment; // Hidden from output
  52. Operations

  53. SCSS: Output: body { font-size: 24px; } $size: 12px; body

    { font-size: $size * 2; }
  54. Functions

  55. SCSS: Output: .i-red { background: url(red.png); } .i-blue { background:

    url(blue.png); } @each $c in red, blue { .i-#{$c} { background: url(#{$c}.png); } }
  56. SCSS: Output: .i-red { color: red; } .i-blue { color:

    blue; } @mixin i($color) { @if $color == red { color: red; } @else { color: blue; } } .i-red { @include i(red); } .i-blue { @include i; }
  57. Error Reporting

  58. CSS Preprocessors +Style Guides = Super Rad

  59. alistapart.com/articles/writingainterfacestyleguide

  60. Keep documentation current & useful.

  61. engineyard.com/blog/2011/front-end-maintainability-with-sass-and-style-guides

  62. First variables. Then mixins. Then placeholder selectors. Then advanced stuff!

    Start with Baby Steps
  63. Sketch it out skitch.com/joesak/di74r/img-028

  64. Stay organized

  65. Clarity is beautiful.

  66. Clarity > Brevity

  67. File Organization images/ content/ layout/ javascripts/ vendor/ stylesheets/ vendor/

  68. Stay organized

  69. If you’re nesting more than 3 levels deep, you’re probably

    doing something wrong.
  70. Engine Yard App Cloud, Early 2011

  71. Engine Yard App Cloud, Early 2011

  72. jacobrask.github.com/styledocco/

  73. jacobrask.github.com/styledocco/styledocco/examples/bootstrap/docs/buttons.html

  74. do.com

  75. Caption and/or URL

  76. // ========================================= // DO WEBSITE // ----------------------------------------- // 01. VENDOR

    FRAMEWORKS @import "compass" @import "compass/css/pie"
  77. // ---------------------------------- // 02. RESET * +box-sizing(border-box) @import "vendor/normalize"

  78. // ---------------------------------------------- // 03. DEPENDENCIES // Variables/mixins/placeholders/etc // These don’t

    emit CSS on their own @import "dependencies/colour" @import "dependencies/measurements" @import "dependencies/typography" @import "dependencies/layout"
  79. // ---------------------------------- // 04. FOUNDATION // Plain semantic HTML //

    No classes/IDs are introduced yet. @import "foundation"
  80. // ---------------------------------- // 05. LAYOUT @import "grid" @import "helpers"

  81. $breakpoint-iPhone: 20em =respond-to($media) @if $media == iPhone @media #{$breakpoint-iPhone} @content

    @else if ...
  82. @for $i from 1 through $column-count +respond-to(iPhone) %grid-#{$i}-iPhone // ...

    +respond-to(iPhone) .sidebar @extend %grid-3-iPhone
  83. // ------------------------------------- // 06. COMPONENTS // Reusable modules, components, etc.

    @import "components/forms" @import "components/buttons" @import "components/messaging" @import "components/pop-stripe"
  84. // POP STRIPE: https://gist.github.com/3141010 // Thanks goes to Eric A.

    Meyer // - $position: the starting position or angle of the gradient. // - $colors: a list of all the colors to be used. @function pop-stripe($position, $colors) $colors: if(type-of($colors) != 'list', compact($colors), $colors) $gradient: compact() $width: 100% / length($colors) @for $i from 1 through length($colors) $pop: nth($colors, $i) $new: $pop ($width * ($i - 1)), $pop ($width * $i) $gradient: join($gradient, $new, comma) @return linear-gradient($position, $gradient) .pop-stripe +background-image(pop-stripe(left, ($stripe-colors)))
  85. do.com

  86. // ---------------------------------- // 07. THEMES @import "themes/light" @import "themes/dark" @import

    "themes/orangina"
  87. // ---------------------------------- // 08. REGIONS @import "regions/header" @import "regions/sidebar" @import

    "regions/footer"
  88. // ---------------------------------- // 09. PRINT @import "print"

  89. // ---------------------------------- // 10. TOOLS <% if Rails.env.development? %> @import

    "show-grid" <% end %>
  90. Web standards implementations of nesting, variables, and other preprocessor-related features

    are being worked into CSS as we speak. CSS Preprocessors are making CSS better.
  91. What else?

  92. smacss.com

  93. stuffandnonsense.co.uk/projects/320andup

  94. susy.oddbird.net

  95. github.com/thomas-mcdonald/bootstrap-sass

  96. blesscss.com

  97. Just give it a try!

  98. sass-lang.com

  99. Team Sass Design FTW!

  100. @TeamSassDesign

  101. #teamSass

  102. Be regular and orderly in your life so that you

    may be violent and original in your work.” ” —Gustave Flaubert
  103. sushiandrobots.com

  104. artinmyco ee.com

  105. speakerdeck.com/u/jina

  106. @jina Thank You!