SASS inherited files - SASS Meetup in Denver, CO

Inherited filesUsing inherited files to create multiple versions of a sites css

Jim Hanifen MapMyFitness

whoamiJim HanifenSr Software Dev Manager / Developer

MapMyFitnessMapMyRun, MapMyRideMapMyWalk, MapMyHike Over 21 Million Users

Support over 400 Devices

... and we use SASS

+ compass, compass_recipes and 960 grid

our challengeSupport our many sites and unique styling across

them using SASSAllow each site to have easily customized look and feel and

branding

Easy, just override!important | override with a specific styles sheet

http://nooooooooooooooo.com/

QuickTime™ and aGIF decompressor

are needed to see this picture.

http://nooooooooooooooo.com/

Define by classBetter, but this causes bloated css

<body class=”mapmyrun”>

.mapmyrun { some stuff}

.mapmyride { some stuff}

What do we really want- Individual css files for each site

- only have the necessary css for that site- no overrides or use of !important

What We Need

SASS variables, mixins and inherited files

How its setup- base - _variables_base - _base - _core- sites - site1 - _site_variables - core

* Lets just go look at the code

https://github.com/jhanifen/sass_inheritied_templates

what is the _ you have?

and _ file will not generate a

css file, it is used only by

sass

Other TipsYo. Use SASS

Compass is Awesome

Recipes are great

Create a simple bash shortcutalias sassy='echo -n -e "\033]0;SASS\007"; cd ~/project/panama/; sass --watch

preprocess/sass/:public/css --compass --require ninesixty --require compass-recipes'

cdn deployments - use a sass variable for image paths and update when deploying

.gitignore your generated css files

But really, use sass and compass and save a ton of time!

Questions?

SASS inherited files - SASS Meetup in Denver, CO

Technology

Transcript of SASS inherited files - SASS Meetup in Denver, CO