css - 嵌套元素命名风格(Jade、HAML、Slim)

Question

寻找如何将 SMACSS 命名约定与 jade、haml 或 slim 模板引擎一起使用的解决方案。

期待以下 jade 代码:

.module
  .child
  .child

作为输出，我将得到以下内容:

<div class="module">
  <div class="child"></div>
  <div class="child"></div>
</div>

但我想达到以下结果:

<div class="module">
  <div class="module-child"></div>
  <div class="module-child"></div>
</div>

是否有任何解决方案来管理它，例如我可以在 SASS 中做到这一点，我的意思是避免手动向每个“ child ”添加“模块-”字符串？

更新

Haml 和 Slim 也是可接受的解决方案

Answer 1

这是我与 jade ( live playground here ) 最接近的结果:

mixin e(elt)
  - var a = 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 and current
    +e('li').item#third(data-dash='fine', aria-live='polite') Item 3 not even a link
      | multi-line
      | block
    // - var parent = 'other' problem of scope I guess 
    +e('li').item lorem ipsum dolor sit amet

- var parent = 'footer'
+e('footer')(role='contentInfo')
  +e.inner © Company - 2014

名为 e 的 mixin将输出一个作为参数的元素(默认为 div )，其属性和内容保持原样，除了第一个类将以变量 parent 的值作为前缀(如果它没有任何类，则将是 parent 本身的值)
我更喜欢对属性使用默认的 jade 语法，包括 class 和 id，而不是将许多参数传递给 mixin(如果它是 div，则不需要任何参数，因为 .sth text 'd 输出 <div class="sth>text</div> 和 +e.sth text 将输出<div class="parent-sth>text</div> )
如果 Mixin 不必处理其他属性(href、id、data-*、role 等)，它会更短遗留问题:更改 parent 的值缩进时无效。它有更简单的先前尝试，所以我猜它与变量的范围有关。理论上您不想更改子元素的前缀，但在实践中...也许作为第二个可选参数？

我在玩 jade 时遇到的问题:

• 属性没有按预期工作。现在是&attributes(attributes) .感谢jade-book issue on GitHub
• 但它会输出未触及的类加上前缀类，所以我不得不在它会被 jade 执行的地方删除它 (delete)