Question

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

#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中查看我的重写（使用您提到的示例）。

P.S。不要使用那个分叉，它现在没有维护，你可能会更好地使用官方Twitter Bootstrap的维基中提到的那个。（details）

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

1 个答案: