Create a gist now

Instantly share code, notes, and snippets.

Nested Modernizr Classes with Compass
.textshadow {
.widget h3 {
text-shadow: -1px -1px 0 #aaa, 2px 2px 5px #3a3a3a;
}
}
@jimmynotjim

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