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
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
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
4. #wcmke What is SASS? Write less, do more.
5. #wcmke What is SASS? SASS is awesome.
6. #wcmke Why SASS over LESS? Compass - “drop-in” bits of SASS @extend() - allows for cleaner HTML Easily Embedding Media Queries #wcmke
7. #wcmke Installation Prepros #wcmke
8. #wcmke Now we write some SASS... #wcmke
9. #wcmke And it becomes CSS! #wcmke
10. #wcmke Any Questions?
11. #wcmke Let’s get SASSy
12. #wcmke Two Flavors .scss .sass #wcmke
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
14. #wcmke Partials / File Structure http://b.parbs.me/PP2n http://b.parbs.me/POcZ #wcmke
15. #wcmke Nesting #wcmke
16. #wcmke Nesting #wcmke Nesting
17. #wcmke Parent Selector Reference #wcmke
18. #wcmke Parent Selector Reference #wcmke
19. #wcmke Selector Bubble Up Perfect for using Media Queries to build responsively. #wcmke
20. #wcmke Variables #wcmke
21. #wcmke @extend() #wcmke #wcmke
22. #wcmke @extend() #wcmke
23. #wcmke Silent @extend #wcmke
24. #wcmke Mixins
25. #wcmke Mixins
26. #wcmke Mixins with Arguments w/
27. #wcmke Mixins with Arguments w/
28. #wcmke Mixins with Default Arguments
29. #wcmke Mixins
30. #wcmke http://bourbon.io/
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
32. #wcmke Operations
33. #wcmke Operations within functions
34. #wcmke Color Functions
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% );
36. #wcmke Color Functions
37. #wcmke Color Functions
38. #wcmke Color Functions
39. #wcmke Color Operations http://sassme.arc90.com/
40. #wcmke Operations with Directive
41. #wcmke #wcmke Operations - Range of Numbers
42. #wcmke Operations - Range of Numbers with Silent placeholders #wcmke
43. #wcmke #wcmke Operations - List of Values
44. #wcmke #wcmke config.rb
45. #wcmke #wcmke config.rb
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: <link> another CSS file 3.Redo all of this when there’s an update. 4.Ugh this sucks, I’ll just use BootstrapWP.
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.
48. #wcmke #wcmke Let’s install Twitter Bootstrap https://github.com/hecbuma/compass-bootstrap
49. #wcmke #wcmke config.rb
50. #wcmke #wcmke config.rb
51. #wcmke #wcmke Processing Modes :nested :expanded :compact :compressed
52. #wcmke #wcmke config.rb
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
54. #wcmke #wcmke Building a WP Theme
55. #wcmke #wcmke Tools http://sassmeister.com/ http://codepen.io/ http://thesassway.com/
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/
57. #wcmke #wcmke I’m Brad Parbs. @BradParbs brad.parbs.me http://b.parbs.me/PSye Slides: