css - Nested elements naming style (Jade, HAML, Slim) -
looking solution how use smacss naming convention jade, haml or slim template engine.
expect following jade code :
.module .child .child
as output i'll following:
<div class="module"> <div class="child"></div> <div class="child"></div> </div>
but i'd reach following result:
<div class="module"> <div class="module-child"></div> <div class="module-child"></div> </div>
is there solution manage can in sass example, mean avoid adding 'module-' string each 'child' manually ?
update
also acceptable solutions haml , slim
this closest got jade (live playground here):
mixin e(elt) - var = attributes; - var cl = attributes.class;delete attributes.class - var elt = elt ? elt : 'div' // if no parameter given if cl - var cl = parent + '-' + cl else - var cl = parent #{elt}&attributes({'class': cl}, attributes) block - var parent = 'box' +e('aside')#so-special +e('h2').title related +e('ul').list +e('li').item: +e('a')(href='#').link item 1 +e('li').item: +e('span').link.current item 2 , current +e('li').item#third(data-dash='fine', aria-live='polite') item 3 not link | multi-line | block // - var parent = 'other' problem of scope guess +e('li').item lorem ipsum dolor sit amet - var parent = 'footer' +e('footer')(role='contentinfo') +e.inner © company - 2014
a mixin named e
output element taken parameter (default div
) attributes , content is, except first class that'll prefixed value of variable parent
(or value of parent
if hasn't class)
prefer using default jade syntax attributes, including class , id passing many parameters mixin (this 1 doesn't need if it's div, .sth text
'd output <div class="sth>text</div>
, +e.sth text
output <div class="parent-sth>text</div>
)
mixin shorter if didn't have deal other attributes (href, id, data-*, role, etc) remaining problem: changing value of parent
has no effect when it's indented. had simpler previous attempts guess it's related scope of variables. theoretically don't want change prefix child elements in practice... maybe second optional parameter?
things had problem while playing jade:
- attributes doesn't work expected. it's
&attributes(attributes)
. jade-book issue on github - but it'll output class untouched plus prefixed one, had remove (
delete
) in place it'd executed jade
Comments
Post a Comment