WordCamp Baltimore - Let's Get Sassy!

yo #wcbalt it was awesome

Transcript

1. Let’s get SASSy #wcbalt
2. #wcbalt BO N U S SLID E
3. #wcbalt Go to @brennenbyrne’s talk and just keep yelling about how zoidberg is a good password BO N U S SLID E
4. #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 #wcbalt
5. #wcpvd More Fun Facts Going to be on a pirate ship later WHAT Cats cats cats cats No longer have a beard :( I love GIFs No memes in this talk at all @BradParbs brad.parbs.me #wcbalt
6. 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 #wcbalt
7. What is SASS? Write less, do more. #wcbalt
8. What is SASS? SASS is awesome. #wcbalt
9. Why SASS over LESS? Compass - “drop-in” bits of SASS @extend() - allows for cleaner HTML Easily Embedding Media Queries #wcmke #wcbalt
10. Installation Prepros #wcmke #wcbalt
11. Should I just use a Javascript compiler? #wcbalt Installation
12. Now we write some SASS... #wcmke #wcbalt
13. And it becomes CSS! #wcmke #wcbalt
14. Any Questions? #wcbalt
15. Let’s get SASSy #wcbalt
16. Two Flavors .scss .sass #wcgr #wcbalt
17. 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 #wcbalt
18. Nesting #wcgr #wcbalt
19. Nesting Nesting #wcgr #wcbalt
20. Parent Selector Reference #wcgr #wcbalt
21. Parent Selector Reference #wcgr #wcbalt
22. Selector Bubble Up Perfect for using Media Queries to build responsively. #wcgr #wcbalt
23. Partials / File Structure http://b.parbs.me/PP2n http://b.parbs.me/POcZ #wcgr #wcbalt
24. Variables #wcgr #wcbalt
25. @extend() #wcmke #wcgr #wcbalt
26. @extend() #wcgr #wcbalt
27. Silent @extend #wcgr #wcbalt
28. Mixins #wcbalt
29. Mixins #wcbalt
30. Mixins with Arguments w/ #wcbalt
31. Mixins with Arguments w/ #wcbalt
32. Mixins with Default Arguments #wcbalt
33. Mixins #wcbalt
34. http://bourbon.io/ #wcbalt
35. 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 #wcbalt
36. Mixins #wcbalt
37. gif break!
38. Operations #wcbalt
39. Operations within functions #wcbalt
40. Color Functions #wcbalt
41. 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% ); #wcbalt
42. Color Functions #wcbalt
43. Color Functions #wcbalt
44. Color Functions #wcbalt
45. Color Operations http://sassme.arc90.com/ #wcbalt
46. Operations with Directive #wcbalt
47. Operations - Range of Numbers #wcgr #wcbalt
48. Operations - Range of Numbers with Silent placeholders #wcgr #wcbalt
49. Operations - List of Values #wcgr #wcbalt
51. config.rb #wcgr #wcbalt
52. config.rb #wcgr #wcbalt
53. 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 #wcbalt
54. 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 #wcbalt
55. Let’s install Twitter Bootstrap https://github.com/hecbuma/compass-bootstrap #wcgr #wcbalt
56. config.rb #wcgr #wcbalt
57. config.rb #wcgr #wcbalt
58. Processing Modes :nested :expanded :compact :compressed #wcgr #wcbalt
59. config.rb #wcgr #wcbalt
60. 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 #wcbalt
61. Building a WP Theme #wcgr #wcbalt
62. Tools http://sassmeister.com/ http://codepen.io/ http://thesassway.com/ #wcgr #wcbalt
63. 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 #wcbalt
64. I’m Brad Parbs. @BradParbs brad.parbs.me http://b.parbs.me/ Slides: #wcgr #wcbalt
65. Questions? #wcbalt
66. #wcbalt