Skip to content

Instantly share code, notes, and snippets.

@DannyJoris
Created June 12, 2014 23:30
Show Gist options
  • Select an option

  • Save DannyJoris/ad842f2fbc8b33c8b71a to your computer and use it in GitHub Desktop.

Select an option

Save DannyJoris/ad842f2fbc8b33c8b71a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="post">
<div class="title">Title</div>
<div class="alt-title">Alt title</div>
</div>
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
// Shows how you can extend a class that is
// nested without including the parent class
.title {
border-left: 10px solid white;
padding-left: 10px;
}
.post {
max-width: 200px;
border-radius: 5px;
background: hotpink;
padding: 15px;
.title {
color: white;
font-size: 180%;
font-family: sans-serif;
margin: 5px 0;
display: inline-block;
width: 100%;
}
.alt-title {
@extend .title; // Extends .title & .post .title
font-size: 120%;
}
}
.title, .post .alt-title {
border-left: 10px solid white;
padding-left: 10px;
}
.post {
max-width: 200px;
border-radius: 5px;
background: hotpink;
padding: 15px;
}
.post .title, .post .alt-title {
color: white;
font-size: 180%;
font-family: sans-serif;
margin: 5px 0;
display: inline-block;
width: 100%;
}
.post .alt-title {
font-size: 120%;
}
<div class="post">
<div class="title">Title</div>
<div class="alt-title">Alt title</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment