Skip to content

Instantly share code, notes, and snippets.

@webdevid
Forked from iamravenous/_bem-builder.scss
Created February 28, 2020 09:47
Show Gist options
  • Save webdevid/7d28d941e20842649a41cb27c043983f to your computer and use it in GitHub Desktop.
Save webdevid/7d28d941e20842649a41cb27c043983f to your computer and use it in GitHub Desktop.
Sass BEM Mixins
@mixin element($name) {
@at-root #{&}__#{$name}{
@content;
}
}
@mixin modifier($name) {
@at-root #{&}--#{$name} {
@content;
}
}
@mixin modified-by($arg) {
.#{$arg} & {
@content;
}
}
.navbar {
padding-top: 1.875rem;
@include element('list') {
display: block;
@include modified-by('navbar--center') {
display: inline-block;
}
}
@include element('item') {
float: left;
}
@include element('link') {
display: block;
padding: 1.25rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
@include modifier('active') {
background-color: crimson;
color: white;
}
}
@include modifier('center') {
text-align: center;
}
}
.navbar {
padding-top: 1.875rem;
}
.navbar__list {
display: block;
}
.navbar--center .navbar__list {
display: inline-block;
}
.navbar__item {
float: left;
}
.navbar__link {
display: block;
padding: 1.25rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
}
.navbar__link--active {
background-color: crimson;
color: white;
}
.navbar--center {
text-align: center;
}
@import 'bem-builder';
@import 'navbar';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment