Skip to content

Instantly share code, notes, and snippets.

@leidottw
Created February 16, 2014 07:58
Show Gist options
  • Select an option

  • Save leidottw/9030911 to your computer and use it in GitHub Desktop.

Select an option

Save leidottw/9030911 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="child">
wtf
</div>
// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----
$large: 5rem;
$medium: 3rem;
$small: 1rem;
.mother {
color: red;
font-size: $large;
a {
color: orange;
font-size: $medium;
span {
color: yellow;
font-size: $small;
}
}
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.mixin {
border: 1px solid #000;
@include border-radius(2rem);
}
.child {
@extend .mother;
@extend .mixin;
}
.mother, .child {
color: red;
font-size: 5rem;
}
.mother a, .child a {
color: orange;
font-size: 3rem;
}
.mother a span, .child a span {
color: yellow;
font-size: 1rem;
}
.mixin, .child {
border: 1px solid #000;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
-ms-border-radius: 2rem;
-o-border-radius: 2rem;
border-radius: 2rem;
}
<div class="child">
wtf
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment