Css Preprocessors

493 views

Published on

Talk on CSS Preprocessors from Creative Coders in Singapore

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
493
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Css Preprocessors

  1. 1. CSS Preprocessors
  2. 2. Ed Moore twitter: @_edmoore gplus: +EdMoore github: eddiemoore
  3. 3. CSS is Awesome
  4. 4. Single Element
  5. 5. FIRE
  6. 6. CSS SUCKS
  7. 7. CSS3 not consistant across browsers Modularisation sucks Hard to stay DRY No Variables*
  8. 8. Vendor Prefixes ‐webkit‐whatever: something ‐moz‐whatever: something ‐o‐whatever: something ‐ms‐whatever: something whatever: something
  9. 9. Enter CSS Preprocessors
  10. 10. Any valid CSS file is a valid SASS/LESS/Stylus file
  11. 11. Variables
  12. 12. SASS $primaryColor: #BADA55; a {   color: $primaryColor; }
  13. 13. LESS @primaryColor: #BADA55; a {   color: @primaryColor; }
  14. 14. Stylus primaryColor = #BADA55 a   color: primaryColor   
  15. 15. Nesting
  16. 16. .module {   width: 500px;      a {     color: red;   }      ul {     li {       display: inline‐block;       a {         color: pink;       }     }   } }
  17. 17. .module {   width: 500px; } .module a {   color: red; } .module ul li {   display: inline‐block; } .module ul li a {   color: pink; }
  18. 18. Avoid inception
  19. 19. Only go 3 levels deep
  20. 20. BAD #mything .module .something ul li a { ... }
  21. 21. Partials
  22. 22. Break up your styles @import 'base/reset'; @import 'base/typography'; @import 'layout/grid'; ...
  23. 23. Functions
  24. 24. @mixin box‐shadow($top, $left, $blur, $color) {   ‐webkit‐box‐shadow: $top $left $blur $color;   ‐moz‐box‐shadow: $top $left $blur $color;   box‐shadow: $top $left $blur $color; } div {   @include box‐shadow(2px, 2px, 5px, rgba(0,0,0,0.3)); }
  25. 25. div {   ‐webkit‐box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);   ‐moz‐box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);   box‐shadow: 2px 2px 5px rgba(0,0,0,0.3); }
  26. 26. Maths Operations
  27. 27. .col‐1‐2 {   width: (100% / 2); } .col‐1‐3 {   width: (100% / 3); } .col‐2‐3 {   width: (100% / 3) * 2; }
  28. 28. .col‐1‐2 {   width: 50%; } .col‐1‐3 {   width: 33.33333%; } .col‐2‐3 {   width: 66.66667%; }
  29. 29. Extending / Inheritance
  30. 30. .foo {   color: red; } .bar {   @extend .foo; }
  31. 31. .foo, .bar {   color: red; }
  32. 32. Referencing Parent Selectors
  33. 33. a {   color: red;   &;:hover {     color: pink;   } }
  34. 34. a {   color: red; } a:hover {   color: pink; }
  35. 35. a {   color: red;      .module &; {     color: green;   } }
  36. 36. a {   color: red; } .module a {   color: green; }
  37. 37. Colour Functions
  38. 38. button {   background: #000;      &;:hover {     color: lighten(#000, 20%);   } }
  39. 39. button {   background: #000; } button:hover {   background: #333333; }
  40. 40. Loops
  41. 41. $total‐columns: 6; $col‐widths: (); @for $i from 1 through $total‐columns {   @for $j from 1 through $i {     $w: ($j/$i);          @if index($col‐widths, $w) == false {       .col‐#{$j}‐#{$i} {         width: $w * 100%;       }       $col‐widths: append($col‐widths, $w, comma);     }   } }
  42. 42. .col‐1‐1 { width: 100%; } .col‐1‐2 { width: 50%; } .col‐1‐3 { width: 33.33333%; } .col‐2‐3 { width: 66.66667%; } .col‐1‐4 { width: 25%; } .col‐3‐4 { width: 75%; } .col‐1‐5 { width: 20%; } .col‐2‐5 { width: 40%; } .col‐3‐5 { width: 60%; } .col‐4‐5 { width: 80%; } .col‐1‐6 { width: 16.66667%; } .col‐5‐6 { width: 83.33333%; }
  43. 43. Utilities
  44. 44. Sass Compass Susy
  45. 45. Stylus Nib
  46. 46. Less Less Hat
  47. 47. How the *!@$ do I turn all that into CSS?!?
  48. 48. Embrace the command line
  49. 49. Tools
  50. 50. LiveReload
  51. 51. CodeKit (OSX only)
  52. 52. Compass.app
  53. 53. Scout
  54. 54. Prepros
  55. 55. Koala
  56. 56. Less.app (OSX only)
  57. 57. Crunch! (Less)
  58. 58. Future
  59. 59. CSS Variables :root {   ‐‐main‐bg‐color: brown; } .one {   background‐color: var(‐‐main‐bg‐color); } Note: The custom property prefix was var- in the earlier spec, but later changed to --. Firefox 31 and above follow the new spec. Mozilla Can I Use
  60. 60. Myth CSS the way it was imagined. Myth.io
  61. 61. Ed Moore twitter: @_edmoore gplus: +EdMoore github: eddiemoore slides: http://bit.ly/1gQqRoe

×