module naming mixins

_module-naming-mixins.scss

@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;
	}
}

module-naming-generated.css

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