Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cheap Sass Tricks

A204ca511ddee820957e715d6d363548?s=47 John W. Long
October 12, 2013

Cheap Sass Tricks

My talk on Sass Evangelism at SassConf 2013.

A204ca511ddee820957e715d6d363548?s=128

John W. Long

October 12, 2013
Tweet

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
  15. None
  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

  47. None
  48. None
  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