Skip to content

Instantly share code, notes, and snippets.

@tommymarshall
Created October 24, 2013 19:07
Show Gist options
  • Save tommymarshall/7143137 to your computer and use it in GitHub Desktop.
Save tommymarshall/7143137 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) {
// Gets string length
$len: str-length(#{&});
$parent: str-slice(#{&}, 2, $len);
@at-root [class^="#{$parent}"][class*="--#{$modifier}"] {
@extend .#{$parent};
@content;
}
}
.button {
padding: 1em 2em;
@include mm(blue) {
background: #00f;
}
@include mm(large) {
font-size: 36px;
}
@include mm(rounded) {
border-radius: 10px;
}
}
/* Multiple Modifier */
.button, [class^="button"][class*="--blue"], [class^="button"][class*="--large"], [class^="button"][class*="--rounded"] {
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