WordCamp Milwaukee 2013: Getting SASSy - Fun with CSS Preproccessors

Write your CSS faster and more efficiently. CSS pre-processors like SASS and LESS let you write DRY CSS that can be modularly used to create themes and sites quite a bit faster.
Starting from a beginner’s perspective, this talk will allow anyone (designers & developers) to get started with SASS or LESS for their WordPress themeing.

Transcript

1. #wcmke
   Let’s get SASSy
   

   View Slide

2. #wcmke
   #wcmke
   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
   

   View Slide

3. #wcmke
   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
   

   View Slide

4. #wcmke
   What is SASS?
   Write less, do more.
   

   View Slide

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

   View Slide

6. #wcmke
   Why SASS over LESS?
   Compass - “drop-in” bits of SASS
   @extend() - allows for cleaner HTML
   Easily Embedding Media Queries
   #wcmke
   

   View Slide

7. #wcmke
   Installation
   Prepros
   #wcmke
   

   View Slide

8. #wcmke
   Now we write some SASS...
   #wcmke
   

   View Slide

9. #wcmke
   And it becomes CSS!
   #wcmke
   

   View Slide

10. #wcmke
    Any Questions?
    

    View Slide

11. #wcmke
    Let’s get SASSy
    

    View Slide

12. #wcmke
    Two Flavors
    .scss .sass
    #wcmke
    

    View Slide

13. #wcmke
    Two Flavors
    .scss .sass
    More similar to CSS
    Easier to jump into from CSS
    What Snow Day Group uses
    Less keystrokes
    Cleaner files
    #wcmke
    

    View Slide

14. #wcmke
    Partials / File Structure
    http://b.parbs.me/PP2n
    http://b.parbs.me/POcZ
    #wcmke
    

    View Slide

15. #wcmke
    Nesting
    #wcmke
    

    View Slide

16. #wcmke
    Nesting
    #wcmke
    Nesting
    

    View Slide

17. #wcmke
    Parent Selector Reference
    #wcmke
    

    View Slide

18. #wcmke
    Parent Selector Reference
    #wcmke
    

    View Slide

19. #wcmke
    Selector Bubble Up
    Perfect for using Media Queries to build responsively.
    #wcmke
    

    View Slide

20. #wcmke
    Variables
    #wcmke
    

    View Slide

21. #wcmke
    @extend()
    #wcmke
    #wcmke
    

    View Slide

22. #wcmke
    @extend()
    #wcmke
    

    View Slide

23. #wcmke
    Silent @extend
    #wcmke
    

    View Slide

24. #wcmke
    Mixins
    

    View Slide

25. #wcmke
    Mixins
    

    View Slide

26. #wcmke
    Mixins with Arguments
    w/
    

    View Slide

27. #wcmke
    Mixins with Arguments
    w/
    

    View Slide

28. #wcmke
    Mixins with Default Arguments
    

    View Slide

29. #wcmke
    Mixins
    

    View Slide

30. #wcmke
    http://bourbon.io/
    

    View Slide

31. #wcmke
    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
    

    View Slide

32. #wcmke
    Operations
    

    View Slide

33. #wcmke
    Operations within functions
    

    View Slide

34. #wcmke
    Color Functions
    

    View Slide

35. #wcmke
    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% );
    

    View Slide

36. #wcmke
    Color Functions
    

    View Slide

37. #wcmke
    Color Functions
    

    View Slide

38. #wcmke
    Color Functions
    

    View Slide

39. #wcmke
    Color Operations
    http://sassme.arc90.com/
    

    View Slide

40. #wcmke
    Operations with Directive
    

    View Slide

41. #wcmke
    #wcmke
    Operations - Range of Numbers
    

    View Slide

42. #wcmke
    Operations - Range of Numbers with Silent placeholders
    #wcmke
    

    View Slide

43. #wcmke
    #wcmke
    Operations - List of Values
    

    View Slide

44. #wcmke
    #wcmke
    config.rb
    

    View Slide

45. #wcmke
    #wcmke
    config.rb
    

    View Slide

46. #wcmke
    #wcmke
    Let’s install Twitter Bootstrap
    Without SASS:
    1.Download zip file.
    2. Copy+Paste into stylesheet
    or: @import another CSS file
    or: another CSS file
    3.Redo all of this when there’s an
    update.
    4.Ugh this sucks, I’ll just use
    BootstrapWP.
    

    View Slide

47. #wcmke
    #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.
    

    View Slide

48. #wcmke
    #wcmke
    Let’s install Twitter Bootstrap
    https://github.com/hecbuma/compass-bootstrap
    

    View Slide

49. #wcmke
    #wcmke
    config.rb
    

    View Slide

50. #wcmke
    #wcmke
    config.rb
    

    View Slide

51. #wcmke
    #wcmke
    Processing Modes
    :nested
    :expanded
    :compact
    :compressed
    

    View Slide

52. #wcmke
    #wcmke
    config.rb
    

    View Slide

53. #wcmke
    #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
    

    View Slide

54. #wcmke
    #wcmke
    Building a WP Theme
    

    View Slide

55. #wcmke
    #wcmke
    Tools
    http://sassmeister.com/ http://codepen.io/
    http://thesassway.com/
    

    View Slide

56. #wcmke
    #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/
    

    View Slide

57. #wcmke
    #wcmke
    I’m Brad Parbs.
    @BradParbs
    brad.parbs.me
    http://b.parbs.me/PSye
    Slides:
    

    View Slide