_module-naming-helpers.scss

/**
 * bemify [modified for Kickoff]
 * =================================
 * https://github.com/franzheidl/bemify
 * Franz Heidl 2015
 *
 * Usage: https://gist.github.com/mrmartineau/0cd2010bf265d712bafb
 */



// CONFIG
// ======

// Output combined state selectors like:
//    .block-element.is-active {}
// Set to false to output single, non-combined state modifiers:
//    .block-element--is-active {}
$combined-state-selectors: true;

// .block[separator]element:
$element-separator: "-";

// .block[separator]modifier:
$modifier-separator: "--";

// The default prefix for state modifier selectors, will be combined with $modifier-separator:
$state-prefix: "is";




// Mixins
// @include ko-block('form') {}
@mixin ko-block($name) {
	.#{$name} {
		@content;
	}
}

// @include ko-element('item') {}
@mixin ko-element($name) {
	@at-root {
		&#{$element-separator}#{$name} {
			@content;
		}
	}
}

// @include ko-modifier('stacked') {}
@mixin ko-modifier($name) {
	@at-root {
		&#{$modifier-separator}#{$name} {
			@content;
		}
	}
}

// @include ko-state('active') {}
// @include ko-state('nav', 'has') {}
@mixin ko-state($state, $prefix: $state-prefix) {
	@if $combined-state-selectors == true {
		@at-root {
			&.#{$prefix}-#{$state} {
				@content;
			}
		}
	}
	@else {
		@at-root {
			&#{$modifier-separator}#{$prefix}-#{$state} {
				@content;
			}
		}
	}
}




// Aliases
// @include ko-component('form') {}
@mixin ko-component($name) {
	@include ko-block($name) {
		@content;
	}
}

// @include ko-child('item') {}
@mixin ko-child($name) {
	@include ko-element($name) {
		@content;
	}
}

// @include ko-subcomponent('item') {}
@mixin ko-subcomponent($name) {
	@include ko-element($name) {
		@content;
	}
}

// @include ko-sub('item') {}
@mixin ko-sub($name) {
	@include ko-element($name) {
		@content;
	}
}