Skip to content

Instantly share code, notes, and snippets.

@jeffsebring

jeffsebring/modernizr_nested.scss

Created April 1, 2012 04:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffsebring/2271137 to your computer and use it in GitHub Desktop.
Save jeffsebring/2271137 to your computer and use it in GitHub Desktop.
Download ZIP
Nested Modernizr Classes with Compass
Raw
modernizr_nested.scss
.textshadow {
.widget h3 {
text-shadow: -1px -1px 0 #aaa, 2px 2px 5px #3a3a3a;
}
}
@jimmynotjim
Copy link

Great point in that post, IE7 has a hard enough time, no use in making it suffer more. One tip I'd add is to utilize Sass's parent selector with &. This is super useful when you have non-css3 styles on the element and want to reduce repetition. It'd look like this:

.widget h3 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  text-align: center;

  .textshadow & {
    text-shadow: -1px -1px 0 #aaa, 2px 2px 5px #3a3a3a;
  }
}

which compiles to this:

.widget h3 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  text-align: center;
}

.text-shadow .widget h3 {
  text-shadow: -1px -1px 0 #aaa, 2px 2px 5px #3a3a3a;
}

*Edit for Sass Reference - http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

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