Más contenido relacionado


Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"

  1. Brian Hoke: WordPress & Sass @bentleyhoke Sass & WordPress Brian Hoke Bentley Hoke Interactive @bentleyhoke |
  2. This Presentation
  3. Aside: Presentation Theme WordPress theme to generate this kind of presentation Implements reveal.js Download
  4. What Sass? preprocessor language extends CSS
  5. Sass Code $base-color: #c00; $body-font-color: lighten( $base-color, 15%); $page-title-color: darken( $base-color, 20%); $body-font-size: '13px'; article { color: $body-font-color; font: { 10 11 12 13 14 15 16 17 123456789 size: $body-font-size; family: Helvetica, Arial, sans-serif; } h1 { color: $page-title-color; } }
  6. Compiled CSS Code article { color: #ff1a1a; font-size: "13px"; font-family: Helvetica, Arial, sans-serif; 12345678 } article h1 { color: #660000; }
  7. Really, what is it? Script that interprets SCSS into CSS Sass is both the language and the script process Flavors – example old (indented) new (SCSS) Output is perfectly valid CSS
  8. Various Whoops As in “Big Whoops”: Compression Variables Nesting File organization (partials & import) Code reuse (mixins & inheritance) Built-in functions & operators
  9. Install Sass Apps Command line
  10. Command Line Installation [Windows] Install Ruby Windows: gem install sass [Mac] sudo gem install sass test it: sass -v Ruby Installer
  11. How Sass? setup watch to generate CSS from changes to SCSS carelessly bang out some code thoughtfully plan out organization of code and files upload generated CSS – just like it was written directly – to production site
  12. Setting Your Watch sass --watch themes/reveal/sass:themes/reveal --style compressed
  13. Variables & Functions $bright-red: #f00; $medium-red: #c00; $half-opaque-white: rgba(255,255,255,0.7); $default-link-color: opacify($medium-red, 0.6); $page-title-color: darken($medium-red, 10%); $link-color: complement($medium-red); $rightleft-padding: 2.5%; 10 $tall-topbottom-padding: 1%; 11 $narrow-topbottom-padding: 0.5%; 12 13 $site-width: 90%; 14 $main-content-width: 68%; 15 16 $sidebar-width: 99% - $main-content-width - (4 * $rightleft-padding); 123456789
  14. Code Organization @import 'reset'; @import 'assistive'; @import 'variables'; @import 'bxslider'; @import 'mainnav'; @import 'interior'; @import 'full_flight_info'; @import 'sidebar'; @import 'structure'; 10 @import 'slicknav'; 11 @import 'responsive'; 123456789
  15. Mixins Sass (from Bourbon library) 1234 @import 'bourbon/bourbon'; section { @include linear-gradient(to top, red, orange); } Resulting CSS 12345 section { background-color: red; background-image: -webkit-linear-gradient(bottom, red, orange); background-image: linear-gradient(to top, red, orange); }
  16. Why Sass? Code organization: easier to maintain, team Performance: loads faster Tools: write better, faster, stronger code Sharing: get code from, give code to others
  17. Code Organization easier to team easier to maintain easier to give and receive example: ABQ airport sites
  18. Performance stitch together multiple CSS files – avoid limit on number of concurrent connections compression
  19. Power inheritance and mixins offer DRY ease-of-change: great power and great responsibility built-in functions a for loop!
  20. Sharing handing off, receiving code switchboarding of settings example: Foundation
  21. More Info & Questions