diff --git a/components/00_Global/_bemGenerator.styl b/components/00_Global/_bemGenerator.styl new file mode 100644 index 0000000..c161e3d --- /dev/null +++ b/components/00_Global/_bemGenerator.styl @@ -0,0 +1,85 @@ +/* + * 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 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 length(block-selector) > 0 + + //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'] + ) + +/* + * 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, + }) \ No newline at end of file diff --git a/components/00_Global/_global.styl b/components/00_Global/_global.styl index d22fabe..7759695 100644 --- a/components/00_Global/_global.styl +++ b/components/00_Global/_global.styl @@ -1,3 +1,4 @@ +@import './_bemGenerator' @import './_selectorHook' @import './_elementAmount'