Skip to content

Instantly share code, notes, and snippets.

@siamak
Last active May 17, 2021 14:10
Show Gist options
  • Save siamak/d02dc025e9214d87b6cd to your computer and use it in GitHub Desktop.
Save siamak/d02dc025e9214d87b6cd to your computer and use it in GitHub Desktop.
Mixin of BEM selectors with SCSS
/*
_____ _ _ ___ ___ _ _ _ _
/ ___|(_) | | | \/ | | | | | | | (_)
\ `--. _ __ _ _ __ ___ __ _ | | __ | . . | ___ | | __| |__ | |_ __ _ _ __ _
`--. \| | / _` || '_ ` _ \ / _` || |/ / | |\/| | / _ \ | |/ /| '_ \ | __|/ _` || '__|| |
/\__/ /| || (_| || | | | | || (_| || < | | | || (_) || < | | | || |_| (_| || | | |
\____/ |_| \__,_||_| |_| |_| \__,_||_|\_\ \_| |_/ \___/ |_|\_\|_| |_| \__|\__,_||_| |_|
www.siamak.us
== Mixin of BEM selectors with SCSS: ==
=======================================
* B: Block
* E: Element
* M: Modifier
*/
// * Build Element(E)::
@mixin element($e) {
&__#{$e}{
@content;
}
}
// * Build Modifier(M)::
@mixin modifier($m) {
&--#{$m}{
@content;
}
}
// Using::
.navigation{ // Block
@include element('button'){ // Element
background-color: gray;
color: white;
border: 0;
padding: .25em .5em;
@include modifier('success'){ // Modifier
background-color: green;
}
@include modifier('error'){ // Modifier
background-color: red;
}
@include modifier('warning'){ // Modifier
background-color: orange;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment