Skip to content

Instantly share code, notes, and snippets.

@elussich
Created July 2, 2015 17:28
Show Gist options
  • Select an option

  • Save elussich/6410506b7a230b8a7980 to your computer and use it in GitHub Desktop.

Select an option

Save elussich/6410506b7a230b8a7980 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.3)
// ----
@mixin extend-component($block, $elementModifier: '') {
@extend #{$block};
&#{$elementModifier} {
@extend #{$block + $elementModifier};
}
}
.block {
background-color: blue;
&__element {
height: 20px;
}
&__element--modifier {
color: red;
}
}
.my-component {
@include extend-component('.block');
@include extend-component('.block', '__element');
@include extend-component('.block', '__element--modifier');
}
.block, .my-component {
background-color: blue;
}
.block__element, .my-component__element {
height: 20px;
}
.block__element--modifier, .my-component__element--modifier {
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment