Cheap Sass Tricks

My talk on Sass Evangelism at SassConf 2013.

Transcript

1. @johnwlong TRICKS!! Cheap Sass John W. Long fun for all ages amaze
2. Help & Feedback
3. TheSassWay Tips + Tricks on Sass + Compass @ Come
4. Timeline Nov 2006 Aug 2008 Jun 2006 Hampton & Nathan create Haml Sass is born Hampton Catlin’s first commit. Nathan joins in by December. Compass is born
5. Nov 2006 Aug 2008 Dec 2008 Eppstein joins Team Sass Jul 2009 Sass 2.2 released Sass is born Hampton Catlin’s first commit. Nathan joins in by December. Compass is born Becomes the “Stdlib” of Sass. Made by Chris Eppstein.
6. May 2010 Aug 2008 Dec 2008 Eppstein joins Team Sass Jul 2009 Sass 2.2 released Compass is born Becomes the “Stdlib” of Sass. Made by Chris Eppstein. Sass 3 released Adds support for SCSS.
7. May 2010 Apr 2011 Sass 3. 1 - Sass + Haml split Jul 2009 Sass 2.2 released Aug 2011 Rails 3.1 adopts Sass as the defacto way of writing CSS Sass 3 released Adds support for SCSS. Sep 2010 SassWatch is born Later finds gainful employment as @TheSassWay.
8. Apr 2011 Sass 3. 1 - Sass + Haml split Aug 2011 Rails 3.1 adopts Sass as the defacto way of writing CSS Jan 2012 Hampton creates libsass (a blazing fast C version of Sass) Jan 2012 SassMeetup Seattle Becomes a force for good all over the internets. Sep 2010 SassWatch is born Later finds gainful employment as @TheSassWay.
9. Aug 2012 Sass 3. 2 released Aug 2011 Rails 3.1 adopts Sass as the defacto way of writing CSS Jan 2012 Hampton creates libsass (a blazing fast C version of Sass) Jan 2012 SassMeetup Seattle Becomes a force for good all over the internets. Aug 2012 SassCast Episode 1 Created by Dale Sande
10. Aug 2012 Sass 3. 2 released Oct 2013 SassConf 2013 We finally have our own conference! Aug 2012 SassCast Episode 1 Created by Dale Sande
11. SassConf Welcome to
12. We’ve come a long way baby
13. Where have we been?
14. “There are several tools and frameworks out there at the moment which extend CSS to adopt a more programmatic syntax and function. It is my opinion that these are only really of benefit to people who haven’t yet mastered writing CSS properly... If you learn how to write your CSS sensibly... you will see little if any need for things like SAAS [sic] et al.” @csswizardry Harry Roberts January 2010
16. “The same goes for things like rounded corners. I've a snippet in dreamweaver that I can pull out when I need to that gives me the code for rounded corners... This is a much more efficient way to handle the problem than having to write out the rule, and then declare it's variable and a further value, don't you think?” On mixins... – Russell B.
17. “Throughout your article, I constantly wondered why any of the things accomplished with Sass could not have been accomplished using CSS. The hallmark of a useful library or tool is that it solves a problem. The issue I still have with Sass after reading this article is that there doesn't seem to be a problem TO solve. You don't have to repeat style rules! You can combine CSS rules with inheritance. ” On solving a real problem... – Chris B.
18. “[What’s] Painful about CSS? Maybe the biggest pain is standards compliance between browsers, to which Sass is completely unrelated? Sass provides nothing but a complicated hand hold for beginners. More programmatic like? Why couldn’t they stick to a standard set of syntax rules? What is it with using a ‘!’ c’mon” On painful CSS? – Ddd
19. Where are we now?
20. Sass Books
21. Dan Cederholm @simplebits
22. Chris Coyier @chriscoyier
23. Nicole Sullivan @stubbornella
24. Nathan Smith @nathansmith
25. Rachel Nabors @rachelnabors
26. Harry Roberts @csswizardry
27. Pro tip — “If your CSS is complicated enough to need a compiler or pre-processor, you’re doing it wrong!” Andrew Clarke @malarkey
28. “I once wrote that there was no need to use a CSS pre-processor like LESS or Sass. I was wrong. Very sorry.” Andrew Clarke @malarkey
29. Sass evangelism is easier than ever
30. ✦ Showing off cool things ✦ Building frameworks (Compass, Bourbon, Foundation) ✦ Blog posts & articles ✦ Speaking at events ✦ Being friendly to newbies What has worked well?
31. ✦ Hounding people on Twitter ✦ Picking fights with Less What has not worked well?
32. Show, don’t tell
33. Why I Sass
34. Reason # 1 Makes it so much easier to organize a project
35. mixins Reason # 2
36. B.Y.O.F (build your own framework) Reason # 3
37. Sass peeps are amazing Reason # 4
38. Favorite things
39. rgba(black, 0.5) Transparent colors
40. lighten(#8293ac, 10%) Color manipulation
41. & + & Double ampersand
42. .button { & + & { margin-left: 2em; } }
43. @include box-sizing(padding-box) Mixins
44. %placeholer Placeholder classes
45. Demos the tricks
46. It’s PB&J time! http://codepen.io/jlong/pen/jFszb
49. The Lorenz Attractor in Sass http://codepen.io/jlong/pen/elaDy by Mason Wendell (@codingdesigner)
50. CSS-spinners.com
51. The Sass Radar http://codepen.io/jlong/pen/aFbcK
52. The Matrix https://github.com/jlong/cheap-sass-tricks
53. ϥ υ Ϋ Ϧ ϑ Ϋ https://github.com/jlong/cheap-sass-tricks
54. Challenges for Sass (We need your help!)
55. In-browser compilation Sass.js la
56. Keyframe animation for Compass
57. Better Docs Blog posts, articles, & books
58. Cool snippets & projects We need to continue to make the case on Twitter
59. Stay classy!!!
60. Thanks! @johnwlong John W. Long