Cheap Sass Tricks - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Help & Feedback

Slide 3

Slide 3 text

TheSassWay Tips + Tricks on Sass + Compass @ Come

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

SassConf Welcome to

Slide 12

Slide 12 text

We’ve come a long way baby

Slide 13

Slide 13 text

Where have we been?

Slide 14

Slide 14 text

“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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

“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.

Slide 17

Slide 17 text

“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.

Slide 18

Slide 18 text

“[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

Slide 19

Slide 19 text

Where are we now?

Slide 20

Slide 20 text

Sass Books

Slide 21

Slide 21 text

Dan Cederholm @simplebits

Slide 22

Slide 22 text

Chris Coyier @chriscoyier

Slide 23

Slide 23 text

Nicole Sullivan @stubbornella

Slide 24

Slide 24 text

Nathan Smith @nathansmith

Slide 25

Slide 25 text

Rachel Nabors @rachelnabors

Slide 26

Slide 26 text

Harry Roberts @csswizardry

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

“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

Slide 29

Slide 29 text

Sass evangelism is easier than ever

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Show, don’t tell

Slide 33

Slide 33 text

Why I Sass

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

mixins Reason # 2

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Sass peeps are amazing Reason # 4

Slide 38

Slide 38 text

Favorite things

Slide 39

Slide 39 text

rgba(black, 0.5) Transparent colors

Slide 40

Slide 40 text

lighten(#8293ac, 10%) Color manipulation

Slide 41

Slide 41 text

& + & Double ampersand

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

@include box-sizing(padding-box) Mixins

Slide 44

Slide 44 text

%placeholer Placeholder classes

Slide 45

Slide 45 text

Demos the tricks

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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