Skip to content

Instantly share code, notes, and snippets.

@paul
Created March 30, 2011 16:05
Show Gist options
  • Save paul/894683 to your computer and use it in GitHub Desktop.
Save paul/894683 to your computer and use it in GitHub Desktop.

We deploy our application at multiple customer sites, and need to come up with a way to handle custom styles for each deployment. Using compass and scss, I've made it so that I only have to change two variables to brand the site. My first stab was something like this:

# in app/views/layouts/application.html.haml:
%body{:class => dashed_fqdn}

# in app/scripts/_branding.scss:

$base-color: red;
$logo-url:   "/images/logo.png";

.foo-example-com {
  $base-color: green;
  $logo-url:   "/images/logos/foo-logo.png";
}

This doesn't work, obviously, because the .foo-example-com rule gets evaluated, even though it doesn't match. Is there a way to conditionally evaluate scss based upon a rule, or am I going about this entirely wrong?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment