sass inherited files - sass meetup in denver, co
TRANSCRIPT
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.
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?