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

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -