2

寻找如何将 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 也是可接受的解决方案

4

3 回答 3

2

这是我与玉最接近的（这里是现场操场）：

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

一个名为的 mixine将输出一个作为参数的元素（默认为div），其属性和内容原样，除了第一个类将以变量的值作为前缀parent（或者parent如果它没有，则将是自身的值't any class）
我更喜欢对属性使用默认的jade语法，包括类和id，而不是将许多参数传递给mixin（如果它是一个div，则不需要任何参数，就像.sth text'd output <div class="sth>text</div>and +e.sth textwill output <div class="parent-sth>text</div>）
如果它不必处理其他属性（href、id、data-*、role 等）则更短剩余问题：更改parent缩进时没有效果。它以前的尝试更简单，所以我猜它与变量的范围有关。从理论上讲，您不想更改子元素的前缀，但实际上……也许是第二个可选参数？

玩玉时遇到的问题：

  • 属性没有按预期工作。现在是&attributes(attributes)。感谢GitHub 上的玉书问题
  • 但它会输出未触及的类加上前缀类，所以我不得不delete在一个由玉执行的地方删除它（）
于 2014-07-08T04:19:15.893 回答
1

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

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

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

乔拉尔夫

于 2014-07-07T09:28:06.733 回答
0

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

.module {
    &-child {

    }
}

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

于 2014-07-07T08:55:59.140 回答