Why CSS Preprocessors Matter

ConvergeFL

Transcript

1. Why CSS Preprocessors Matter Jina Bolton // Product Designer // Do ConvergeFL // 2012
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
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!