Css 嵌套元素命名样式（Jade、HAML、Slim）

正在寻找如何将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的可接受解决方案，您应该能够通过SASS实现这一点。只要您拥有最新的SASS版本，就应该能够使用以下语法：

.module {
    &-child {

    }
}

---

看看这篇文章，了解更多关于SASS新特性的信息。我的一些想法：变量有什么问题

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

或者将其与以下各项结合使用：

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

当然，还有更多的代码要编写，但如果需要更改，那么您只能在某一点上进行更改

再见

---

拉尔夫

这是我与翡翠最接近的一次了（）：

名为

e

的mixin将输出一个作为参数的元素（默认值为

div

），其属性和内容保持不变，但第一个类除外，该类将以变量

parent

的值作为前缀（如果没有任何类，则将是

parent

本身的值）
我更喜欢对属性使用默认的jade语法，包括class和id，而不是将许多参数传递给mixin（如果它是div，则不需要任何参数，如

。sth text

'd output

text

）
如果Mixin不需要处理其他属性（href、id、data-*、role等），那么它会更短 剩余问题：当缩进时，更改父项的值无效。以前的尝试比较简单，所以我想这和变量的范围有关。理论上，您不希望更改子元素的前缀，但实际上。。。也许作为第二个可选参数

我玩jade时遇到的问题：

• 属性未按预期工作。现在是

  &属性（attributes）

  。多亏了
• 但它将输出未触及的类加上带前缀的类，所以我不得不将它（

  delete

  ）删除到jade将执行它的位置

---

我使用变量作为BEM类名。@Grawl，感谢您的回复，您能添加一些示例吗？我想模块child是一个新类，对吗？而不是模块类（我的意思是多类）@ProllyGeek，确切地说，目标是创建新的类名，父名称为prefix@Evgeniy我的意思正是Rwam开发人员为Response编写的内容，是的，sass很清楚，我在用jade生成具有相同类名的html时遇到了一个问题：）啊，是的，应该看到这一点，抱歉，哈哈。嗯，我不知道玉以及我知道萨斯，但从我的知识，我认为这是不可能的。尽管如此，我可能完全错了。谢谢你的反馈，是的，使用VAR是可能的，但我正在寻找最轻量级的方法。（比如在sass中表示eg）。也许有任何方法可以达到更新核心配置的目标，比如使用mixin是最好的解决方案。它的可伸缩性更强，样板代码更少，可读性更强，看起来不错，但读起来不清楚。我认为对任何事情都进行缩写都是一大罪恶。以下是我明确的观点：

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