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

#WCPVD - Getting SASSy

Brad Parbs
August 17, 2013

#WCPVD - Getting SASSy

Brad Parbs

August 17, 2013

More Decks by Brad Parbs

Other Decks in Technology


  1. #wcpvd #wcpvd I’m Brad Parbs. Created Wolf, hook_s & wpWizard

    Core Contributor in 3.5 & 3.6 Run Snow Day Group, (snowday.io) ♥ WordPress, Startups, and Code Plugin and Theme author/developer @BradParbs brad.parbs.me 2 Saturday, August 17, 13
  2. #wcpvd What is SASS? “Sass is a meta-language on top

    of CSS ... with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” sass-lang.org 3 Saturday, August 17, 13
  3. #wcpvd Why SASS over LESS? Compass - “drop-in” bits of

    SASS @extend() - allows for cleaner HTML Easily Embedding Media Queries #wcmke 6 Saturday, August 17, 13
  4. #wcpvd Two Flavors .scss .sass More similar to CSS Easier

    to jump into from CSS Probably where you want to start Less keystrokes Cleaner files #wcmke 13 Saturday, August 17, 13
  5. #wcpvd Selector Bubble Up Perfect for using Media Queries to

    build responsively. #wcmke 18 Saturday, August 17, 13
  6. #wcpvd Mixins Appearance Background Clip Background Origin Background Size Border

    Radius Box Box Shadow Box Sizing CSS Regions CSS3 Pie Columns Filter Font Face http://compass-style.org 31 Saturday, August 17, 13
  7. #wcpvd Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color,

    10% ); lighten( $base-color, 10% ); saturate( $base-color, 20% ); desaturate( $base-color, 20% ); adjust-hue( $base-color, 20% ); 37 Saturday, August 17, 13
  8. #wcpvd #wcmke Let’s install Twitter Bootstrap Without SASS: 1.Download zip

    file. 2. Copy+Paste into stylesheet or: @import another CSS file or: <link> another CSS file 3.Redo all of this when there’s an update. 4.Ugh this sucks, I’ll just use BootstrapWP. 49 Saturday, August 17, 13
  9. #wcpvd #wcmke Let’s install Twitter Bootstrap With SASS: 1.$ gem

    install compass-bootstrap (only have to ever do this once) 2. Add require “compass- bootstrap” to config.rb. 50 Saturday, August 17, 13
  10. #wcpvd #wcmke Building a WP Theme • We want only

    one stylesheet • Our SASS folder should live independently • config.rb in the root, so we can use Codekit to optimize images & JS https://github.com/bradp/Wolf 56 Saturday, August 17, 13