Tweet
Tweet

Slide 1

Slide 1 text

FRONT END BADASSERY WITH SASS Jessica Eldredge RailsGirls DC 2012

Slide 2

Slide 2 text

“I don’t like the green. Can we change it?”

Slide 3

Slide 3 text

CSS IS A PAIN

Slide 4

Slide 4 text

it lacks VARIABLES it lacks FUNCTIONS it’s LONG it’s REPETITIVE

Slide 5

Slide 5 text

ENTER SASS a front end developer’s dream

Slide 6

Slide 6 text

SASS OR SCSS?

Slide 7

Slide 7 text

TWO DIFFERENT SYNTAXES

Slide 8

Slide 8 text

VARIABLES

Slide 9

Slide 9 text

NESTING

Slide 10

Slide 10 text

MIXINS

Slide 11

Slide 11 text

EXTEND

Slide 12

Slide 12 text

COLOR FUNCTIONS

Slide 13

Slide 13 text

MATH

Slide 14

Slide 14 text

HELPFUL TIPS

Slide 15

Slide 15 text

LIMIT YOUR NESTING no more than 2 levels

Slide 16

Slide 16 text

USE @IMPORT no extra HTTP requests!

Slide 17

Slide 17 text

SEPARATE MIXINS keep a mixin library

Slide 18

Slide 18 text

USE PARTIALS think in terms of MODULES build up your LIBRARY

Slide 19

Slide 19 text

NEXT STEPS

Slide 20

Slide 20 text

FRAMEWORKS, LIBRARIES Compass compass-style.org Bourbon thoughtbot.com/bourbon

Slide 21

Slide 21 text

LEARN MORE SCSS Sass Documentation thesassway.com Chris Eppstein @chriseppstein github.com/chriseppstein

Slide 22

Slide 22 text

OTHER PREPROCESSORS LESS lesscss.org Stylus learnboost.github.com/stylus

Slide 23

Slide 23 text

GO FORTH, BADASS

Slide 24

Slide 24 text

KEEP IN TOUCH! [email protected] @jessabean github.com/jessabean