front end badassery with sass

24
FRONT END BADASSERY WITH SASS Jessica Eldredge RailsGirls DC 2012

Upload: jessabean

Post on 11-Jul-2015

295 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Front End Badassery with Sass

FRONT END

BADASSERY WITH SASSJessica Eldredge

RailsGirls DC 2012

Page 2: Front End Badassery with Sass

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

Page 3: Front End Badassery with Sass

CSS IS A PAIN

Page 4: Front End Badassery with Sass

it lacks VARIABLESit lacks FUNCTIONS

it’s LONGit’s REPETITIVE

Page 5: Front End Badassery with Sass

ENTER SASSa front end developer’s dream

Page 6: Front End Badassery with Sass

VARIABLES

Page 7: Front End Badassery with Sass

NESTING

Page 8: Front End Badassery with Sass

MIXINS

Page 9: Front End Badassery with Sass

EXTEND

Page 10: Front End Badassery with Sass

COLOR FUNCTIONS

Page 11: Front End Badassery with Sass

MATH

Page 12: Front End Badassery with Sass

SASS OR SCSS?

Page 13: Front End Badassery with Sass

TWO DIFFERENT SYNTAXES

Page 14: Front End Badassery with Sass

HELPFUL TIPS

Page 15: Front End Badassery with Sass

LIMIT YOUR NESTINGno more than 2 levels

Page 16: Front End Badassery with Sass

USE @IMPORTno extra HTTP requests!

Page 17: Front End Badassery with Sass

SEPARATE MIXINSkeep a mixin library

Page 18: Front End Badassery with Sass

USE PARTIALSthink in terms of

MODULESbuild up your

LIBRARY

Page 19: Front End Badassery with Sass

NEXT STEPS

Page 20: Front End Badassery with Sass

FRAMEWORKS, LIBRARIES

Compasscompass-style.org

Bourbonthoughtbot.com/bourbon

Page 21: Front End Badassery with Sass

LEARN MORE SCSS

Sass Documentationthesassway.com

Chris Eppstein@chriseppstein

github.com/chriseppstein

Page 22: Front End Badassery with Sass

OTHER PREPROCESSORS

LESSlesscss.org

Styluslearnboost.github.com/stylus

Page 23: Front End Badassery with Sass

GO FORTH, BADASS

Page 24: Front End Badassery with Sass

KEEP IN TOUCH!

[email protected]

@jessabean

github.com/jessabean