Advanced BEM generator with overridung
This commit is contained in:
parent
fff7e73064
commit
a1c4a6f883
@ -7,6 +7,7 @@
|
||||
|
||||
_css-prefix = 'RV'
|
||||
_element-modifier = ()
|
||||
_additional-element-modifier-blocks = ()
|
||||
|
||||
/*
|
||||
* Gets the selector of the parent class
|
||||
@ -20,6 +21,11 @@ _get_parent_selector()
|
||||
_get_block_selector()
|
||||
return unquote(split('__', _get_parent_selector())[0])
|
||||
|
||||
_get_element_selector()
|
||||
p(_get_parent_selector())
|
||||
element--modifier = split('__', _get_parent_selector())[1]
|
||||
return unquote(split('--', element--modifier)[0])
|
||||
|
||||
/*
|
||||
* Generates a CSS class for an
|
||||
* Block according to BEM
|
||||
@ -27,40 +33,52 @@ _get_block_selector()
|
||||
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}
|
||||
if 'RV-Block__Modifier' in called-from
|
||||
{block}
|
||||
else
|
||||
&{_get_block_selector()}--{name}
|
||||
{block}
|
||||
|
||||
_create_element(name, block)
|
||||
{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'],
|
||||
block_list: modifier['block_list']
|
||||
)
|
||||
|
||||
|
||||
/*
|
||||
* Generates an CSS class for an element
|
||||
* according to BEM. Also minds the element modifiers
|
||||
* For more see RV-Element___Modifier
|
||||
*/
|
||||
RV-Element(name)
|
||||
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']
|
||||
)
|
||||
|
||||
//Detect if the selector will be generated
|
||||
//by an earlier call of RV-Element
|
||||
if 'RV-Element' in called-from
|
||||
_create_element(name, block)
|
||||
else
|
||||
{block-selector}__{name}
|
||||
_create_element(name, block)
|
||||
else
|
||||
warn('No block found. Creating One instead')
|
||||
+RV-Block(name)
|
||||
@ -75,13 +93,27 @@ RV-Element(name)
|
||||
* from RV-Element
|
||||
*/
|
||||
RV-Element__Modifier(name)
|
||||
callback = @(element, name, modifier_block){
|
||||
&{_get_block_selector()}__{element}--{name}{
|
||||
{modifier_block}
|
||||
if 'RV-Element__Modifier' in called-from
|
||||
//What the actual fuch this language is to utterly buggy
|
||||
push(_additional-element-modifier-blocks, @block{block})
|
||||
else
|
||||
callback = @(element, name, block_list){
|
||||
&{_get_block_selector()}__{element}--{name}{
|
||||
for current_block in block_list{
|
||||
|
||||
{current_block}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
push(_element-modifier, {
|
||||
callback: callback
|
||||
name: name
|
||||
block: block,
|
||||
})
|
||||
block_list = ()
|
||||
push(block_list, @block{block})
|
||||
l = length(_additional-element-modifier-blocks)
|
||||
for i in range(0, l)
|
||||
b = pop(_additional-element-modifier-blocks)
|
||||
push(block_list, b)
|
||||
|
||||
push(_element-modifier, {
|
||||
callback: callback
|
||||
name: name
|
||||
block_list: block_list,
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user