Skip to content

Instantly share code, notes, and snippets.

@justin-c-rounds

justin-c-rounds/main.scss

Forked from kevinSuttle/main.scss
Created December 5, 2012 17:19
Show Gist options
  • Save justin-c-rounds/4217603 to your computer and use it in GitHub Desktop.
Save justin-c-rounds/4217603 to your computer and use it in GitHub Desktop.
Download ZIP
Overriding variable scope in Sass
Raw
main.scss
$sans-font-stack: Arial, Helvetica, sans-serif;
.featured, .ads, time, footer, .social, summary, .sidebar, .feed, .intro { font-family: $sans-font-stack; }
Raw
mq.scss
/*
I want to override the font stack inside media queries.
Something like '$sans-font-stack: Georgia, Palatino, serif;'
*/
.featured, .ads, time, footer, .social, summary, .sidebar, .feed, .intro { font-family: ? }
/*
Something like this?
*/
$sans-font-stack: Arial, Helvetica, sans-serif;
$landscape-font-stack: Georgia, serif;
.featured, .ads, time, footer, .social, summary, .sidebar, .feed, .intro {
font-family: $sans-font-stack;
@media (orientation: landscape) {
font-family: $landscape-font-stack;
}
}
@justin-c-rounds
Copy link
Author 

$sans-font-stack: Arial, Helvetica, sans-serif;
$landscape-font-stack: Georgia, serif;

.featured, .ads, time, footer, .social, summary, .sidebar, .feed, .intro  {
  font-family: $sans-font-stack;
  @media (orientation: landscape) {
    font-family: $landscape-font-stack;
  }
}

@kevinSuttle
Copy link

So, just a different variable then? I'm thinking mixins might be a good choice too. Thanks for taking a look!

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