Skip to content

Instantly share code, notes, and snippets.

@benjamincharity
Created October 1, 2015 16:56
Show Gist options
  • Save benjamincharity/ac1b742eef899417259b to your computer and use it in GitHub Desktop.
Save benjamincharity/ac1b742eef899417259b to your computer and use it in GitHub Desktop.
Create sub classes for mixins with nested elements: http://sassmeister.com/gist/5fbd18270e7a57c90e5f
@mixin sub_class(
$type: element,
$class_name: null
) {
@if $type == element {
&__#{$class_name} {
@content
}
}
@if $type == modifier {
&--#{$class_name} {
@content
}
}
}
// Usage:
@mixin grid_item(
$height: 56%
) {
background-color: red;
@include sub_class(element, outer) {
background-color: blue;
}
@include sub_class(modifier, inner) {
background-color: green;
}
&:hover {
background-color: yellow;
}
}
.foo {
@include grid_item();
}
// Generates:
.foo {
background-color: red;
}
.foo__outer {
background-color: blue;
}
.foo--inner {
background-color: green;
}
.foo:hover {
background-color: yellow;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment