Question

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

期待以下玉码：

.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中做到这一点，我的意思是避免添加＆＃39;模块 - ＆＃39;字符串给每个孩子＆＃39;手动？

更新

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语法来表示属性，包括类和id，而不是将许多参数传递给mixin（如果它是div，则不需要任何参数，如同.sth text'd输出<div class="sth>text</div>和{ {1}}将输出+e.sth text）
如果不必处理其他属性（href，id，data- *，role等），Mixin会更短剩下的问题：当缩进时，更改<div class="parent-sth>text</div>的值无效。以前的尝试比较简单，所以我猜它与变量的范围有关。理论上你不想改变子元素的前缀，但实际上......也许是第二个可选参数？

玩玉时我遇到的问题：

属性无法按预期工作。现在是parent。感谢jade-book issue on GitHub
但是它会输出未触及的类加上前缀，所以我必须将它删除（&attributes(attributes)）在由jade执行的地方

Answer 2

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

- 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}

当然，还有更多的代码需要编写，但如果需要进行更改，那么您必须只在一个点上执行此操作。

侨拉尔夫

Answer 3

您应该能够通过SASS实现这一目标。只要您拥有最新的SASS版本，您就应该能够使用以下语法：

.module {
    &-child {

    }
}

有关SASS http://davidwalsh.name/future-sass

的新功能的更多信息，请查看此文章

嵌套元素命名风格（Jade，HAML，Slim）

3 个答案: