Question

Browsing through the 2.0-wip branch of Twitter Bootstrap, I found LESS have a nice way of bundling variables and mixins. See the example code below:

#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);
  }
}

What is the SCSS equivalent of that? How do I re-write the above in SCSS?

Answer 1

Unfortunately, this is one of missing features (according to me) in SCSS today. The answer to this question is: there’s is no SCSS equivalent. You have to re-write it in a SCSS compatible way. Look at my rewrite in my SCSS Twitter Bootstrap fork for example (uses the very example you mentioned).

P.S. Don’t use that fork, it is not maintained right now and you’re probably better off with the one mentioned in the wiki of the official Twitter Bootstrap. (details)