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

#WCGR - Getting SASSy

D529f2403e21f08bfa16365bdf032f81?s=47 Brad Parbs
August 24, 2013

#WCGR - Getting SASSy

D529f2403e21f08bfa16365bdf032f81?s=128

Brad Parbs

August 24, 2013
Tweet

Transcript

  1. #wcgr Let’s get SASSy

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

  5. #wcgr What is SASS? SASS is awesome.

  6. #wcgr Why SASS over LESS? Compass - “drop-in” bits of

    SASS @extend() - allows for cleaner HTML Easily Embedding Media Queries #wcmke
  7. #wcgr Installation Prepros #wcmke

  8. #wcgr Installation Prepros #wcmke

  9. #wcgr Now we write some SASS... #wcmke

  10. #wcgr And it becomes CSS! #wcmke

  11. #wcgr Any Questions?

  12. #wcgr Let’s get SASSy

  13. #wcgr Two Flavors .scss .sass #wcgr

  14. #wcgr Two Flavors .scss .sass More similar to CSS Easier

    to jump into from CSS Probably where you want to start Less keystrokes Cleaner files #wcgr
  15. #wcgr Nesting #wcgr

  16. #wcgr Nesting Nesting #wcgr

  17. #wcgr Parent Selector Reference #wcgr

  18. #wcgr Parent Selector Reference #wcgr

  19. #wcgr Selector Bubble Up Perfect for using Media Queries to

    build responsively. #wcgr
  20. #wcgr Partials / File Structure http://b.parbs.me/PP2n http://b.parbs.me/POcZ #wcgr

  21. #wcgr Variables #wcgr

  22. #wcgr @extend() #wcmke #wcgr

  23. #wcgr @extend() #wcgr

  24. #wcgr Silent @extend #wcgr

  25. #wcgr Mixins

  26. #wcgr Mixins

  27. #wcgr Mixins with Arguments w/

  28. #wcgr Mixins with Arguments w/

  29. #wcgr Mixins with Default Arguments

  30. #wcgr Mixins

  31. #wcgr

  32. #wcgr http://bourbon.io/

  33. #wcgr Mixins Appearance Background Clip Background Origin Background Size Border

    Radius Box Box Shadow Box Sizing CSS Regions CSS3 Pie Columns Filter Font Face
  34. #wcgr Mixins Reset Utilities Links Lists Text Vertical Rhythm Color

    General Print Sprites Tables http://compass-style.org
  35. #wcgr Mixins

  36. #wcgr gif break!

  37. #wcgr Operations

  38. #wcgr Operations within functions

  39. #wcgr Color Functions

  40. #wcgr Color Functions examples from: http://b.parbs.me/PSRH

  41. #wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E;

  42. #wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color,

    10% ); lighten( $base-color, 10% );
  43. #wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color,

    10% ); lighten( $base-color, 10% );
  44. #wcgr 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% );
  45. #wcgr 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% );
  46. #wcgr 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% );
  47. #wcgr 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% );
  48. #wcgr Color Functions

  49. #wcgr Color Functions

  50. #wcgr Color Functions

  51. #wcgr Color Operations http://sassme.arc90.com/

  52. #wcgr Operations with Directive

  53. #wcgr Operations - Range of Numbers #wcgr

  54. #wcgr Operations - Range of Numbers with Silent placeholders #wcgr

  55. #wcgr Operations - List of Values #wcgr

  56. None
  57. #wcgr config.rb #wcgr

  58. #wcgr config.rb #wcgr

  59. #wcgr 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. #wcgr
  60. #wcgr 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. #wcgr
  61. #wcgr Let’s install Twitter Bootstrap https://github.com/hecbuma/compass-bootstrap #wcgr

  62. #wcgr config.rb #wcgr

  63. #wcgr config.rb #wcgr

  64. #wcgr Processing Modes #wcgr

  65. #wcgr Processing Modes :expanded #wcgr

  66. #wcgr Processing Modes :nested :expanded #wcgr

  67. #wcgr Processing Modes :nested :expanded :compact #wcgr

  68. #wcgr Processing Modes :nested :expanded :compact :compressed #wcgr

  69. #wcgr config.rb #wcgr

  70. #wcgr 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 #wcgr
  71. #wcgr Building a WP Theme #wcgr

  72. #wcgr Tools http://sassmeister.com/ http://codepen.io/ http://thesassway.com/ #wcgr

  73. #wcgr 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/ #wcgr

  74. #wcgr I’m Brad Parbs. @BradParbs brad.parbs.me http://b.parbs.me/ Slides: #wcgr

  75. #wcgr Questions?

  76. #wcgr