Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
module naming mixins
@include component('foo') {
margin: auto;
@include modifier('bar') {
padding: 20px;
}
@include modifier('baz') {
padding: 50px;
@include respond-min($bp-single-col) {
padding: 20px;
}
}
@include state('active') {
background-color: green;
}
}
.foo {
margin: auto;
}
.foo--bar {
padding: 20px;
}
.foo--baz {
padding: 50px;
}
@media screen and (min-width: 46.875em) {
.foo--baz {
padding: 20px;
}
}
.foo.is-active {
background-color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment