BEM SASS Mixins

_bem.scss

// BEM mixins (Block, Element, Modifier)
//
// Just google if you're confused.


@mixin block($name) {
	@at-root .#{$name} {
		@content;
	}
}

@mixin element($names...) {
	$selector: "";
	$i: 1;
	@each $name in $names {
		@if ($i != 1) {
			$selector: ", #{$selector}";
		}
		$selector: "#{&}__#{$name} #{$selector}";
		$i: $i + 1;
	}

	@at-root #{$selector} {
		@content;
	}
}

@mixin modifier($names...) {
	$selector: "";
	$i: 1;
	@each $name in $names {
		@if ($i != 1) {
			$selector: ", #{$selector}";
		}
		$selector: "#{&}--#{$name} #{$selector}";
		$i: $i + 1;
	}

	@at-root #{$selector} {
		@content;
	}
}