/* * 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, })