Mixin of BEM selectors with SCSS

BEM__Mixin.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;
	}
}
}