Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kyleknighted/1c12dc8c6a9a93b2a5fd to your computer and use it in GitHub Desktop.
Save kyleknighted/1c12dc8c6a9a93b2a5fd to your computer and use it in GitHub Desktop.
<div class="block">
<div class="block__element">Stuff</div>
<div class="block__element--modifier">Red Stuff</div>
<div class="block__element--and-another">Yellow Stuff</div>
<div class="block__element--modifier block__element--and-another">Blue Stuff</div>
</div>
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----
.block {
&__element {
background-color: #000;
color: #fff;
&--modifier {
@extend .block__element;
color: #f00;
}
&--and-another {
@extend .block__element;
color: #ff0;
}
&[class*="--modifier"][class*="--and-another"] {
color: #00f;
}
}
}
.block__element, .block__element--modifier, .block__element--and-another {
background-color: #000;
color: #fff;
}
.block__element--modifier {
color: #f00;
}
.block__element--and-another {
color: #ff0;
}
.block__element[class*="--modifier"][class*="--and-another"], [class*="--modifier"][class*="--and-another"].block__element--modifier, [class*="--modifier"][class*="--and-another"].block__element--and-another {
color: #00f;
}
<div class="block">
<div class="block__element">Stuff</div>
<div class="block__element--modifier">Red Stuff</div>
<div class="block__element--and-another">Yellow Stuff</div>
<div class="block__element--modifier block__element--and-another">Blue Stuff</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment