Save 37% off PRO during our Black Friday Sale! »

#WCPVD - Getting SASSy

D529f2403e21f08bfa16365bdf032f81?s=47 Brad Parbs
August 17, 2013

#WCPVD - Getting SASSy

D529f2403e21f08bfa16365bdf032f81?s=128

Brad Parbs

August 17, 2013
Tweet

Transcript

  1. #wcpvd Let’s get SASSy 1 Saturday, August 17, 13

  2. #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
  3. #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
  4. #wcpvd What is SASS? Write less, do more. 4 Saturday,

    August 17, 13
  5. #wcpvd What is SASS? SASS is awesome. 5 Saturday, August

    17, 13
  6. #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
  7. #wcpvd Installation Prepros #wcmke 7 Saturday, August 17, 13

  8. #wcpvd Now we write some SASS... #wcmke 8 Saturday, August

    17, 13
  9. #wcpvd And it becomes CSS! #wcmke 9 Saturday, August 17,

    13
  10. #wcpvd Any Questions? 10 Saturday, August 17, 13

  11. #wcpvd Let’s get SASSy 11 Saturday, August 17, 13

  12. #wcpvd Two Flavors .scss .sass #wcmke 12 Saturday, August 17,

    13
  13. #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
  14. #wcpvd Nesting #wcmke 14 Saturday, August 17, 13

  15. #wcpvd Nesting #wcmke Nesting 15 Saturday, August 17, 13

  16. #wcpvd Parent Selector Reference #wcmke 16 Saturday, August 17, 13

  17. #wcpvd Parent Selector Reference #wcmke 17 Saturday, August 17, 13

  18. #wcpvd Selector Bubble Up Perfect for using Media Queries to

    build responsively. #wcmke 18 Saturday, August 17, 13
  19. #wcpvd Partials / File Structure http://b.parbs.me/PP2n http://b.parbs.me/POcZ #wcmke 19 Saturday,

    August 17, 13
  20. #wcpvd Variables #wcmke 20 Saturday, August 17, 13

  21. #wcpvd @extend() #wcmke #wcmke 21 Saturday, August 17, 13

  22. #wcpvd @extend() #wcmke 22 Saturday, August 17, 13

  23. #wcpvd Silent @extend #wcmke 23 Saturday, August 17, 13

  24. #wcpvd Mixins 24 Saturday, August 17, 13

  25. #wcpvd Mixins 25 Saturday, August 17, 13

  26. #wcpvd Mixins with Arguments w/ 26 Saturday, August 17, 13

  27. #wcpvd Mixins with Arguments w/ 27 Saturday, August 17, 13

  28. #wcpvd Mixins with Default Arguments 28 Saturday, August 17, 13

  29. #wcpvd Mixins 29 Saturday, August 17, 13

  30. #wcpvd http://bourbon.io/ 30 Saturday, August 17, 13

  31. #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
  32. #wcpvd Mixins 32 Saturday, August 17, 13

  33. #wcpvd gif break! 33 Saturday, August 17, 13

  34. #wcpvd Operations 34 Saturday, August 17, 13

  35. #wcpvd Operations within functions 35 Saturday, August 17, 13

  36. #wcpvd Color Functions 36 Saturday, August 17, 13

  37. #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
  38. #wcpvd Color Functions 38 Saturday, August 17, 13

  39. #wcpvd Color Functions 39 Saturday, August 17, 13

  40. #wcpvd Color Functions 40 Saturday, August 17, 13

  41. #wcpvd Color Operations http://sassme.arc90.com/ 41 Saturday, August 17, 13

  42. #wcpvd Operations with Directive 42 Saturday, August 17, 13

  43. #wcpvd #wcmke Operations - Range of Numbers 43 Saturday, August

    17, 13
  44. #wcpvd Operations - Range of Numbers with Silent placeholders #wcmke

    44 Saturday, August 17, 13
  45. #wcpvd #wcmke Operations - List of Values 45 Saturday, August

    17, 13
  46. 46 Saturday, August 17, 13

  47. #wcpvd #wcmke config.rb 47 Saturday, August 17, 13

  48. #wcpvd #wcmke config.rb 48 Saturday, August 17, 13

  49. #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
  50. #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
  51. #wcpvd #wcmke Let’s install Twitter Bootstrap https://github.com/hecbuma/compass-bootstrap 51 Saturday, August

    17, 13
  52. #wcpvd #wcmke config.rb 52 Saturday, August 17, 13

  53. #wcpvd #wcmke config.rb 53 Saturday, August 17, 13

  54. #wcpvd #wcmke Processing Modes :nested :expanded :compact :compressed 54 Saturday,

    August 17, 13
  55. #wcpvd #wcmke config.rb 55 Saturday, August 17, 13

  56. #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
  57. #wcpvd #wcmke Building a WP Theme 57 Saturday, August 17,

    13
  58. #wcpvd #wcmke Tools http://sassmeister.com/ http://codepen.io/ http://thesassway.com/ 58 Saturday, August 17,

    13
  59. #wcpvd #wcmke Resources http://alistapart.com/article/getting-started-with-sass http://css-tricks.com/redesigning-with-sass/ https://speakerdeck.com/anotheruiguy/clean-out-your-sass-junk-drawer https://speakerdeck.com/irishstu/an-introduction-to-sassy-css http://sass-lang.com/ 59 Saturday,

    August 17, 13
  60. #wcpvd #wcmke I’m Brad Parbs. @BradParbs brad.parbs.me http://b.parbs.me/Qspg Slides: 60

    Saturday, August 17, 13
  61. #wcpvd Questions? 61 Saturday, August 17, 13

  62. #wcpvd 62 Saturday, August 17, 13