LESS 的命名空间、类捆绑的 SCSS 等价物是什么

Question

浏览 Twitter Bootstrap 的 2.0-wip 分支，我发现 LESS 有一种很好的捆绑变量和 mixin 的方法。请参阅下面的示例代码：

#font {
  #family {
    .serif() {
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    .sans-serif() {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .monospace() {
      font-family: Menlo, Monaco, Courier New, monospace;
    }
  }
  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .serif;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .sans-serif;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .monospace;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
}

与之等效的 SCSS 是什么？如何在 SCSS 中重写上面的内容？

Answer 1

不幸的是，这是当今 SCSS 中缺少的功能之一（据我所知）。这个问题的答案是：没有等效的 SCSS。您必须以 SCSS 兼容的方式重新编写它。看看我在 SCSS Twitter Bootstrap fork< 中的重写内容< /a> 例如（使用您提到的例子）。

PS 不要使用那个分叉，它现在没有维护，你可能最好使用官方 Twitter Bootstrap 的 wiki 中提到的分叉。 （详细信息）