Implementing BEM Generator/Helper
This commit is contained in:
parent
d5f9122ab2
commit
0292e2c872
85
components/00_Global/_bemGenerator.styl
Normal file
85
components/00_Global/_bemGenerator.styl
Normal file
@ -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,
|
||||||
|
})
|
@ -1,3 +1,4 @@
|
|||||||
|
@import './_bemGenerator'
|
||||||
@import './_selectorHook'
|
@import './_selectorHook'
|
||||||
|
|
||||||
@import './_elementAmount'
|
@import './_elementAmount'
|
||||||
|
Loading…
Reference in New Issue
Block a user