Skip to content

Instantly share code, notes, and snippets.

@tommymarshall
Created November 26, 2013 15:49
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 tommymarshall/7660762 to your computer and use it in GitHub Desktop.
Save tommymarshall/7660762 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<button class="button--blue--large--rounded">I'm a button!</button>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
/* Multiple Modifier */
@mixin mm($modifier) {
@at-root &[class*="--#{$modifier}"] {
@content;
}
}
[class^="button"] {
padding: 1em 2em;
@include mm(blue) {
background: #00f;
}
@include mm(large) {
font-size: 36px;
}
@include mm(rounded) {
border-radius: 10px;
}
}
/* Multiple Modifier */
[class^="button"] {
padding: 1em 2em;
}
[class^="button"][class*="--blue"] {
background: #00f;
}
[class^="button"][class*="--large"] {
font-size: 36px;
}
[class^="button"][class*="--rounded"] {
border-radius: 10px;
}
<button class="button--blue--large--rounded">I'm a button!</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment