嵌套元素命名风格（Jade、HAML、Slim）答案

【问题标题】：Nested elements naming style (Jade, HAML, Slim)嵌套元素命名风格（Jade、HAML、Slim）
【发布时间】：2014-06-27 10:32:14
【问题描述】：

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

期待以下玉码：

.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 中做到这一点，我的意思是避免手动将 'module-' 字符串添加到每个 'child' ？

更新

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

【问题讨论】：

我使用变量作为 BEM 类名。
@Grawl，感谢您的回复，您能否添加一些示例？
module-child 是一个新类，我想对吧？不是模块类（我的意思是多类）
@ProllyGeek，确切地说，目标是创建以父名为前缀的新类名
@Evgeniy 我的意思正是 Rwam Dev 写的

标签： css haml pug slim smacss

【解决方案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），其属性和内容保持不变，但第一个类将以变量@987654327 的值作为前缀@（如果没有任何类，则将是 parent 本身的值）
我更喜欢对属性使用默认的jade语法，包括类和id，而不是将许多参数传递给一个mixin（如果它是一个div，这个不需要任何参数，就像.sth text'd输出<div class="sth>text</div>和+e.sth text将输出<div class="parent-sth>text</div>)
如果不需要处理其他属性（href、id、data-*、role 等），Mixin 会更短剩余问题：更改parent 的值在缩进时无效。它以前的尝试更简单，所以我猜它与变量的范围有关。从理论上讲，您不想更改子元素的前缀，但实际上......也许作为第二个可选参数？

玩玉时遇到的问题：

属性无法按预期工作。现在是&attributes(attributes)。感谢jade-book issue on GitHub
但它会输出未修改的类加上前缀类，所以我不得不将它 (delete) 删除到一个由玉执行的地方

【讨论】：

看起来使用 mixin 是最好的解决方案。它更具可扩展性，样板代码更少，语法更易读
看起来不错，但读起来不清楚。我认为缩写一切是一个大恶。这是我的清晰观点：codepen.io/Grawl/pen/eyDau

【解决方案2】：

我的一些想法：变量有什么问题？

- var myModule = 'module'
div(class="#{myModule}")
  div(class="#{myModule}-child")
  div(class="#{myModule}-child")

或将其与 each 组合：

- var myModule2 = 'foobar'
div(class="#{myModule2}")
  each idx in [0, 1, 2, 3]
    div(class="#{myModule2}-child") I'm child #{idx}

当然，还有很多代码要编写，但如果需要更改，那么您只能在某一点上执行此操作。

Ciao 拉尔夫

【讨论】：

感谢您的反馈，是的，可以使用 vars，但我正在寻找最轻量级的方法。（例如在 sass 中）。也许有任何方法可以达到更新核心配置的目标

【解决方案3】：

您应该能够使用 SASS 实现此目的。只要你有最新的 SASS 版本，你应该可以使用以下语法：

.module {
    &-child {

    }
}

查看这篇文章，了解有关 SASS http://davidwalsh.name/future-sass 的新功能的更多信息

【讨论】：

感谢回复，是的，sass 很清楚，我在生成具有相同类名的 html 时遇到了问题：)
啊，是的，应该看到了，抱歉哈哈。好吧，我对 Jade 的了解不如对 SASS 的了解，但据我所知，我认为这是不可能的。不过这么说的话，我可能大错特错了。