scss-library/components/00_Global/_bemGenerator.styl

/*
 * This is set of mixins to help generating
 * CSS classes according to the Block__Element--Modifier pattern.
 * It also helps nesting those classes in any fashion imaganible
 * and still produces clean BEM CSS
 */

_css-prefix = 'RV'
_element-modifier = ()

/*
 * Gets the selector of the parent class
 */
_get_parent_selector()
	return split(' ', selector())[-1]

/*
 * Gets the selector of the current block
 */
_get_block_selector()
	return unquote(split('__', _get_parent_selector())[0])

/*
 * Generates a CSS class for an
 * Block according to BEM
 */
RV-Block(name)
	.{_css-prefix}-{name}
		{block}

/*
 * Generates a CSS class for an block modifier
 * according to BEM. 
 */
RV-Block__Modifier(name)
	&{_get_block_selector()}--{name}
		{block}

/*
 * Generates an CSS class for an element
 * according to BEM. Also minds the element modifiers
 * For more see RV-Element___Modifier
 */
RV-Element(name)
	block-selector = _get_block_selector()
	// Are we in a block?
	if block-selector != '&'
		//Create Selector and output the CSS for the element
		{block-selector}__{name}
			{block}
			
			// Checking for modifiers
			l = length(_element-modifier) - 1
			for i in range(0, l)
				modifier = pop(_element-modifier)
				callback = modifier['callback']
				// Calling the modifiers block,
				// passing the name of the element
				callback(
					element: name,
					name: modifier['name'],
					modifier_block: modifier['block']
				)
	else
		warn('No block found. Creating One instead')
		+RV-Block(name)
			{block}
/*
 * Generates a CSS class for an element modifier
 * according to BEM. These are ment to be part of the 
 * content block of an element and since child-mixins
 * are called first there is no way of knowing what the
 * current element is named. To solve this, we store
 * a callback for the modifier and add the element name
 * from RV-Element
 */
RV-Element__Modifier(name)
	callback = @(element, name, modifier_block){
		&{_get_block_selector()}__{element}--{name}{
			{modifier_block}
		}
	}
	push(_element-modifier, {
		callback: callback
		name: name 
		block: block,
	})