title: What is the SCSS equivalent of LESS's Namespaces, bundling of classes
body: <p>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:</p>
  
  <pre><code>#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 &gt; #family &gt; .serif;
      #font &gt; .shorthand(@size, @weight, @lineHeight);
    }
    .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
      #font &gt; #family &gt; .sans-serif;
      #font &gt; .shorthand(@size, @weight, @lineHeight);
    }
    .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
      #font &gt; #family &gt; .monospace;
      #font &gt; .shorthand(@size, @weight, @lineHeight);
    }
  }
  </code></pre>
  
  <p>What is the SCSS equivalent of that? How do I re-write the above in SCSS?</p>