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

Cheap Sass Tricks

John W. Long
October 12, 2013

Cheap Sass Tricks

My talk on Sass Evangelism at SassConf 2013.

John W. Long

October 12, 2013
Tweet

More Decks by John W. Long

Other Decks in Design

Transcript

  1. @johnwlong
    TRICKS!!
    Cheap Sass
    John W. Long
    fun for all ages
    amaze

    View Slide

  2. Help & Feedback

    View Slide

  3. TheSassWay
    Tips + Tricks on Sass + Compass
    @
    Come

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  11. SassConf
    Welcome to

    View Slide

  12. We’ve come a
    long way baby

    View Slide

  13. Where have we been?

    View Slide

  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

    View Slide

  15. View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  19. Where are we now?

    View Slide

  20. Sass Books

    View Slide

  21. Dan Cederholm
    @simplebits

    View Slide

  22. Chris Coyier
    @chriscoyier

    View Slide

  23. Nicole Sullivan
    @stubbornella

    View Slide

  24. Nathan Smith
    @nathansmith

    View Slide

  25. Rachel Nabors
    @rachelnabors

    View Slide

  26. Harry Roberts
    @csswizardry

    View Slide

  27. Pro tip — “If your CSS is complicated enough
    to need a compiler or pre-processor,
    you’re doing it wrong!”
    Andrew Clarke
    @malarkey

    View Slide

  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

    View Slide

  29. Sass evangelism is
    easier than ever

    View Slide

  30. ✦ Showing off cool things
    ✦ Building frameworks (Compass, Bourbon, Foundation)
    ✦ Blog posts & articles
    ✦ Speaking at events
    ✦ Being friendly to newbies
    What has worked well?

    View Slide

  31. ✦ Hounding people on Twitter
    ✦ Picking fights with Less
    What has not worked well?

    View Slide

  32. Show, don’t tell

    View Slide

  33. Why I Sass

    View Slide

  34. Reason # 1
    Makes it so much easier
    to organize a project

    View Slide

  35. mixins
    Reason # 2

    View Slide

  36. B.Y.O.F
    (build your own framework)
    Reason # 3

    View Slide

  37. Sass peeps are amazing
    Reason # 4

    View Slide

  38. Favorite things

    View Slide

  39. rgba(black, 0.5)
    Transparent colors

    View Slide

  40. lighten(#8293ac, 10%)
    Color manipulation

    View Slide

  41. & + &
    Double ampersand

    View Slide

  42. .button {
    & + & {
    margin-left: 2em;
    }
    }

    View Slide

  43. @include box-sizing(padding-box)
    Mixins

    View Slide

  44. %placeholer
    Placeholder classes

    View Slide

  45. Demos
    the tricks

    View Slide

  46. It’s PB&J time!
    http://codepen.io/jlong/pen/jFszb

    View Slide

  47. View Slide

  48. View Slide

  49. The Lorenz Attractor in Sass
    http://codepen.io/jlong/pen/elaDy
    by Mason Wendell (@codingdesigner)

    View Slide

  50. CSS-spinners.com

    View Slide

  51. The Sass Radar
    http://codepen.io/jlong/pen/aFbcK

    View Slide

  52. The Matrix
    https://github.com/jlong/cheap-sass-tricks

    View Slide

  53. ϥ
    υ
    Ϋ
    Ϧ
    ϑ
    Ϋ
    https://github.com/jlong/cheap-sass-tricks

    View Slide

  54. Challenges for Sass
    (We need your help!)

    View Slide

  55. In-browser compilation
    Sass.js
    la

    View Slide

  56. Keyframe animation
    for Compass

    View Slide

  57. Better Docs
    Blog posts, articles, & books

    View Slide

  58. Cool snippets & projects
    We need to continue to make the case on Twitter

    View Slide

  59. Stay classy!!!

    View Slide

  60. Thanks!
    @johnwlong
    John W. Long

    View Slide