• Like
SASS inherited files - SASS Meetup in Denver, CO
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

SASS inherited files - SASS Meetup in Denver, CO

  • 75 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
75
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Inherited files Using inherited files to create multiple versions of a sites css Jim Hanifen MapMyFitness
  • 2. whoami Jim Hanifen Sr Software Dev Manager / Developer MapMyFitness MapMyRun, MapMyRide MapMyWalk, MapMyHike Over 21 Million Users Support over 400 Devices ... and we use SASS + compass, compass_recipes and 960 grid
  • 3. our challenge Support our many sites and unique styling across them using SASS Allow each site to have easily customized look and feel and branding
  • 4. Easy, just override !important | override with a specific styles sheet QuickTime™ and a GIF decompressor are needed to see this picture. http://nooooooooooooooo.com/
  • 5. Define by class Better, but this causes bloated css <body class=”mapmyrun”> .mapmyrun { some stuff } .mapmyride { some stuff }
  • 6. 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
  • 7. How its setup - base - _variables_base - _base - _core - sites - site1 - _site_variables - core what is the _ you have? and _ file will not generate a css file, it is used only by sass * Lets just go look at the code https://github.com/jhanifen/sass_inheritied_templates
  • 8. Other Tips Yo. Use SASS Compass is Awesome Recipes are great Create a simple bash shortcut alias sassy='echo -n -e "033]0;SASS007"; 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?