http://codepen.io/jlong/pen/wErcp

modular-typography-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// http://codepen.io/jlong/pen/wErcp

@import "compass";
@include global-reset;

/*
 * Variables
 */

$text-color: #333;
$quiet-color: #ccc;
$loud-color: #000;
$heading-color: #111;

$link-color: #d54aaf;
$link-hover-color: saturate(#d54aaf, 20%);
$link-visited-color: purple;

$base-font-family: 'Roboto Condensed', sans-serif;
$base-font-size: 18px;
$base-font-weight: 300;

$fixed-font-family: 'Andale Mono', AndaleMono, monospace;
$fixed-font-size: 15px;
$fixed-line-height: 1.2;

$heading-font-family: 'Roboto Condensed', sans-serif;
$heading-font-weight: 700;


/*
 * Base styles
 */

body {
  color: $text-color;
  font-size: $base-font-size;
  font-family: $base-font-family;
  font-weight: $base-font-weight;
  padding: 30px;
  line-height: 1.6;
}


/*
 * Typography
 */

.link {
  color: $link-color;
  text-decoration: none;
  
  &:visited {
    color: $link-visited-color;
  }
  
  &:hover, &:visited:hover {
    color: $link-hover-color;
    text-decoration: underline;
  }
}

.fixed { font-family: $fixed-font-family; font-size: $fixed-font-size; line-height: $fixed-line-height; }

.quiet { font-color: $quiet-color; }
.loud  { font-color: $loud-color; }

.italic { font-style: italic; }
.bold   { font-weight: 700; @extend .loud; }

.h1, .h2, .h3, .h4, .h5, .h6 { font-family: $heading-font-family; font-weight: $heading-font-weight; }
.h1, .h2 { line-height: 1.1; }
.h3, .h4 { line-height: 1.3; }
.h1 { font-size: 400%; letter-spacing: -2px; }
.h2 { font-size: 250%; letter-spacing: -1px; }
.h3 { font-size: 200%; }
.h4 { font-size: 180%; }
.h5 { font-size: 130%; }
.h6 { font-size: 100%; }

.block-margins { margin: 1em 0; }

.unordered-list { list-style-type: disc; }
.ordered-list { list-style: decimal; }

.typography {
  a { @extend .link; }

  i, em { @extend .italic; }
  b, strong { @extend .bold; }
  
  h1, .h1 { @extend .h1; margin: 1em 0 0.5em; }
  h2, .h2 { @extend .h2; margin: 1em 0 0.5em; }
  h3, .h3 { @extend .h3; margin: 1em 0 0.5em; }
  h4, .h4 { @extend .h4; margin: 1em 0 0.5em; }
  h5, .h5 { @extend .h5; margin: 1em 0 0.5em; }
  h6, .h6 { @extend .h6; margin: 1em 0 0.5em; }
  
  p, ul, ol, pre { @extend .block-margins; }
  
  ul { @extend .unordered-list; }
  ol { @extend .ordered-list; }
  
  pre, code { @extend .fixed; }
}


/*
 * Modifiers
 */

.float-left  { float: left; margin-right: 1em; }
.float-right { float: right; margin-left: 1em; }

.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }


/*
 * Object definitions
 */

.content {
  margin: 0 auto;
  width: 32em;
}

.header-block {
  font-size: 110%;
  
  &.typography h1 { font-size: 450%; }
}

.author-block {
  border-top: 3px double $quiet-color;
  margin-top: 4em;
}

modular-typography-output.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/*
 * Variables
 */
/*
 * Base styles
 */
body {
  color: #333333;
  font-size: 18px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
  padding: 30px;
  line-height: 1.6;
}

/*
 * Typography
 */
.link, .typography a {
  color: #d54aaf;
  text-decoration: none;
}
.link:visited, .typography a:visited {
  color: purple;
}
.link:hover, .typography a:hover, .link:visited:hover, .typography a:visited:hover {
  color: #eb34b9;
  text-decoration: underline;
}

.fixed, .typography pre, .typography code {
  font-family: "Andale Mono", AndaleMono, monospace;
  font-size: 15px;
  line-height: 1.2;
}

.quiet {
  font-color: #cccccc;
}

.loud, .bold, .typography b, .typography strong {
  font-color: black;
}

.italic, .typography i, .typography em {
  font-style: italic;
}

.bold, .typography b, .typography strong {
  font-weight: 700;
}

.h1, .typography h1, .typography .h1, .h2, .typography h2, .typography .h2, .h3, .typography h3, .typography .h3, .h4, .typography h4, .typography .h4, .h5, .typography h5, .typography .h5, .h6, .typography h6, .typography .h6 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}

.h1, .typography h1, .typography .h1, .h2, .typography h2, .typography .h2 {
  line-height: 1.1;
}

.h3, .typography h3, .typography .h3, .h4, .typography h4, .typography .h4 {
  line-height: 1.3;
}

.h1, .typography h1, .typography .h1 {
  font-size: 400%;
  letter-spacing: -2px;
}

.h2, .typography h2, .typography .h2 {
  font-size: 250%;
  letter-spacing: -1px;
}

.h3, .typography h3, .typography .h3 {
  font-size: 200%;
}

.h4, .typography h4, .typography .h4 {
  font-size: 180%;
}

.h5, .typography h5, .typography .h5 {
  font-size: 130%;
}

.h6, .typography h6, .typography .h6 {
  font-size: 100%;
}

.block-margins, .typography p, .typography ul, .typography ol, .typography pre {
  margin: 1em 0;
}

.unordered-list, .typography ul {
  list-style-type: disc;
}

.ordered-list, .typography ol {
  list-style: decimal;
}

.typography h1, .typography h1, .typography .h1 {
  margin: 1em 0 0.5em;
}
.typography h2, .typography h2, .typography .h2 {
  margin: 1em 0 0.5em;
}
.typography h3, .typography h3, .typography .h3 {
  margin: 1em 0 0.5em;
}
.typography h4, .typography h4, .typography .h4 {
  margin: 1em 0 0.5em;
}
.typography h5, .typography h5, .typography .h5 {
  margin: 1em 0 0.5em;
}
.typography h6, .typography h6, .typography .h6 {
  margin: 1em 0 0.5em;
}

/*
 * Modifiers
 */
.float-left {
  float: left;
  margin-right: 1em;
}

.float-right {
  float: right;
  margin-left: 1em;
}

.text-left {
  text-align: left   !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right  !important;
}

/*
 * Object definitions
 */
.content {
  margin: 0 auto;
  width: 32em;
}

.header-block {
  font-size: 110%;
}
.header-block.typography h1 {
  font-size: 450%;
}

.author-block {
  border-top: 3px double #cccccc;
  margin-top: 4em;
}

modular-typography-rendered.html

<article class="content">

<header class="header-block typography">
  <h1>How Sass can shape the future of&nbsp;CSS</h1>

  <p>The rise in popularity of CSS extensions, such as Sass, in recent years has not gone unnoticed by the people who work on proposing and standardizing modules for CSS3 (and CSS4).</p>
</header>

<div class="typography">
  <h2>Sass features being adapted for submission</h2>
  
  <p>Many of the key features found in Sass are being adapted for submission to the W3C. <a href="http://www.xanthir.com/blog/b49w0">Variables, Mixins, and Nesting are all mooted for inclusion in CSS</a>, and we may see some of them appear in the near future.</p>

  <p>Then again, we may not; resistance to the proposals is quite strong from certain members - for example, <a href="http://www.w3.org/People/Bos/">Bert Bos</a> wrote a long article on <a href="http://www.w3.org/People/Bos/CSS-variables">why he considers CSS Variables to be harmful</a>. But I thought it would be interesting for the Sass community to see how the software to which you develop and contribute to (Sass) is being used to discuss the future of the web.</p>

  <h2>The Variables proposal</h2>
  <p>This proposal should look very familiar to you - it’s the same syntax that Sass uses, with one addition. Each variable is defined using a three-part syntax: first you set up the declaration using the <code>@var</code> at-rule, then you provide a unique name with the <code>$</code> character before it, then you set the value:</p>

  <pre>@var $foo #F00;</pre>

  <p>Once set up like this, you can reference your variable by using the unique name as a value:</p>

  <pre>h1 {
  color: $foo;
}</pre>

  <p><a href="http://www.xanthir.com/blog/b4AD0">This proposal has already been put forward to the W3C</a>, and I’ll tell you the result of that shortly.</p>

  <h2>The Mixins proposal</h2>
  <p>As with Variables, you should be very familiar with the Mixins proposal - the syntax used in Sass was the inspiration. You create a declaration block using the @mixin at-rule, assign a unique id, and then add your rules:</p>

  <pre>@mixin foo {
  color: #F00;
  font-weight: bold;
}</pre>

  <p>When you need to use that code block you call it using the @mix directive and the unique id you previously assigned:</p>

  <pre>h1 {
  font-size: 2em;
  @mix foo;
}</pre>

  <p>As you can see, the only difference is that the CSS proposal uses @mix in place of Sass’s @include. As with Sass, you can also use parameters with Mixins:</p>

<pre>@mixin foo($bar #F00) {
  border-color: $bar;
  color: $bar;
}

h1 {
  @mix foo(#00F);
}</pre>

  <h2>An alternative variables syntax</h2>

  <p>Recently, <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0699.html">an alternative syntax for Variables has been proposed</a>. This syntax looks and acts somewhat similarly to the HTML data attribute, although it’s not the same. In this proposal variables are scoped to elements (for global scope, you’d use the :root selector) and the variable name is prefixed with data-:</p>

<pre>:root {
  data-foo: #F00;
}</pre>

  <p>Then you reference the variable by using the unique name in the data function:</p>

<pre>h1 {
  color: data(foo);
}</pre>

  <p>This has the advantage of allowing scoped variables, and integrating better with the <a href="http://dev.w3.org/csswg/cssom/">CSSOM</a>, JavaScript, as well as inspector tools like <a href="http://getfirebug.com/">Firebug</a> or <a href="http://www.opera.com/dragonfly/">Dragonfly</a>.</p>

  <p>It must be stressed, however, that this is still only at the discussion stage.</p>

  <h2>So when will we see them?</h2>
  <p>As I said, maybe never. As I understand it, the first Variables proposal was not well received by the W3C - but the module author, <a href="https://twitter.com/#!/tabatkins">Tab Atkins</a>, is continuing to refine it anyway. Tab is also key to the creation of the alternative syntax. You can follow along with Tab and his writing at his personal blog where he shares his thoughts on web standards as well as details surrounding discussions on the future of CSS.</p>

  <p>As for Mixins, they were rejected out of hand and probably won’t be pursued. The reason given? Lack of use cases. But I can’t imagine that you, as Sass creators, developers and users are short of use cases for Mixins. So, if you have them I’d love to read them - please leave a comment below sharing your thoughts if that’s the case.</p>

  <p>If work does continue on these proposals, or any part of them, I think that it would be a matter of little time before browsers started to implement them; I believe, in fact, that <a href="http://www.webkit.org/">WebKit</a> already implemented Variables, only to remove them after feedback from the <a href="http://www.w3.org/">W3C</a>.</p>

  <h2>Conclusion</h2>
  <p>I have to confess that I’ve only briefly experimented with Sass, and have not used it in any production websites, but what I like about it is the ease with which it’s been possible to adapt the syntax into CSS itself. It’s great to see community-created language extensions influence the evolution of the web, and even if none of these proposals ever make it to the implementation stage, you can be sure that <b>at the very least</b> they form part of the standards conversation.</p>

  <h2>Links</h2>
  <ol>
    <li><a href="http://www.xanthir.com/blog/b49w0" class="link external" target="_blank">CSSOM, Vars, Mixins, Nesting, and Modules</a></li>
    <li><a href="http://www.w3.org/People/Bos/CSS-variables" class="link external" target="_blank">Why “variables” in CSS are harmful</a></li>
    <li><a href="http://www.xanthir.com/blog/b4AD0" class="link external" target="_blank">CSS Variables Draft</a></li>
    <li><a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0699.html" class="link external" target="_blank">Better Variables through Custom Properties from Tab Atkins Jr. on 2011-10-24</a></li>
  </ol>
</div>

<footer class="author-block typeset">
  <h2>The Author, Peter Gasston</h2>

  <p><img class="float-left" src="https://si0.twimg.com/profile_images/391831398/peter_opie.png" width="120" height="120" alt="Peter Gasston"> <a href="http://www.petergasston.co.uk/">Peter Gasston</a> works as a developer at <a href="http://top10.com/">Top10</a> and codes mainly client-side languages (although he’s familiar with server-side as well). Peter is a keen advocate of open web standards, is the author of <a href="http://nostarch.com/css3.htm"><i>The Book of CSS3: A Developer’s Guide to the Future of Web Design</i></a> (released May 2011), and has written for .Net magazine and <a href="http://www.css3.info/">CSS3.info</a>.</p>

    <p>Peter blogs on technical issues at <a href="http://www.broken-links.com/">Broken-Links.com</a>, has spoken at <a href="http://ignitelondon.net/">Ignite London</a> as well as various other web development meetings, and can often be found under the user name of ‘stopsatgreen’ (clever anagram).</p>

    <p>Connect with Peter on Twitter at <a href="https://twitter.com/#!/stopsatgreen">@stopsatgreen</a> and <a href="http://lanyrd.com/profile/stopsatgreen/">Lanyrd.com</a>.</p>
</footer>

</article>

modular-typography.html

<article class="content">

<header class="header-block typography">
  <h1>How Sass can shape the future of&nbsp;CSS</h1>

  <p>The rise in popularity of CSS extensions, such as Sass, in recent years has not gone unnoticed by the people who work on proposing and standardizing modules for CSS3 (and CSS4).</p>
</header>

<div class="typography">
  <h2>Sass features being adapted for submission</h2>
  
  <p>Many of the key features found in Sass are being adapted for submission to the W3C. <a href="http://www.xanthir.com/blog/b49w0">Variables, Mixins, and Nesting are all mooted for inclusion in CSS</a>, and we may see some of them appear in the near future.</p>

  <p>Then again, we may not; resistance to the proposals is quite strong from certain members - for example, <a href="http://www.w3.org/People/Bos/">Bert Bos</a> wrote a long article on <a href="http://www.w3.org/People/Bos/CSS-variables">why he considers CSS Variables to be harmful</a>. But I thought it would be interesting for the Sass community to see how the software to which you develop and contribute to (Sass) is being used to discuss the future of the web.</p>

  <h2>The Variables proposal</h2>
  <p>This proposal should look very familiar to you - it’s the same syntax that Sass uses, with one addition. Each variable is defined using a three-part syntax: first you set up the declaration using the <code>@var</code> at-rule, then you provide a unique name with the <code>$</code> character before it, then you set the value:</p>

  <pre>@var $foo #F00;</pre>

  <p>Once set up like this, you can reference your variable by using the unique name as a value:</p>

  <pre>h1 {
  color: $foo;
}</pre>

  <p><a href="http://www.xanthir.com/blog/b4AD0">This proposal has already been put forward to the W3C</a>, and I’ll tell you the result of that shortly.</p>

  <h2>The Mixins proposal</h2>
  <p>As with Variables, you should be very familiar with the Mixins proposal - the syntax used in Sass was the inspiration. You create a declaration block using the @mixin at-rule, assign a unique id, and then add your rules:</p>

  <pre>@mixin foo {
  color: #F00;
  font-weight: bold;
}</pre>

  <p>When you need to use that code block you call it using the @mix directive and the unique id you previously assigned:</p>

  <pre>h1 {
  font-size: 2em;
  @mix foo;
}</pre>

  <p>As you can see, the only difference is that the CSS proposal uses @mix in place of Sass’s @include. As with Sass, you can also use parameters with Mixins:</p>

<pre>@mixin foo($bar #F00) {
  border-color: $bar;
  color: $bar;
}

h1 {
  @mix foo(#00F);
}</pre>

  <h2>An alternative variables syntax</h2>

  <p>Recently, <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0699.html">an alternative syntax for Variables has been proposed</a>. This syntax looks and acts somewhat similarly to the HTML data attribute, although it’s not the same. In this proposal variables are scoped to elements (for global scope, you’d use the :root selector) and the variable name is prefixed with data-:</p>

<pre>:root {
  data-foo: #F00;
}</pre>

  <p>Then you reference the variable by using the unique name in the data function:</p>

<pre>h1 {
  color: data(foo);
}</pre>

  <p>This has the advantage of allowing scoped variables, and integrating better with the <a href="http://dev.w3.org/csswg/cssom/">CSSOM</a>, JavaScript, as well as inspector tools like <a href="http://getfirebug.com/">Firebug</a> or <a href="http://www.opera.com/dragonfly/">Dragonfly</a>.</p>

  <p>It must be stressed, however, that this is still only at the discussion stage.</p>

  <h2>So when will we see them?</h2>
  <p>As I said, maybe never. As I understand it, the first Variables proposal was not well received by the W3C - but the module author, <a href="https://twitter.com/#!/tabatkins">Tab Atkins</a>, is continuing to refine it anyway. Tab is also key to the creation of the alternative syntax. You can follow along with Tab and his writing at his personal blog where he shares his thoughts on web standards as well as details surrounding discussions on the future of CSS.</p>

  <p>As for Mixins, they were rejected out of hand and probably won’t be pursued. The reason given? Lack of use cases. But I can’t imagine that you, as Sass creators, developers and users are short of use cases for Mixins. So, if you have them I’d love to read them - please leave a comment below sharing your thoughts if that’s the case.</p>

  <p>If work does continue on these proposals, or any part of them, I think that it would be a matter of little time before browsers started to implement them; I believe, in fact, that <a href="http://www.webkit.org/">WebKit</a> already implemented Variables, only to remove them after feedback from the <a href="http://www.w3.org/">W3C</a>.</p>

  <h2>Conclusion</h2>
  <p>I have to confess that I’ve only briefly experimented with Sass, and have not used it in any production websites, but what I like about it is the ease with which it’s been possible to adapt the syntax into CSS itself. It’s great to see community-created language extensions influence the evolution of the web, and even if none of these proposals ever make it to the implementation stage, you can be sure that <b>at the very least</b> they form part of the standards conversation.</p>

  <h2>Links</h2>
  <ol>
    <li><a href="http://www.xanthir.com/blog/b49w0" class="link external" target="_blank">CSSOM, Vars, Mixins, Nesting, and Modules</a></li>
    <li><a href="http://www.w3.org/People/Bos/CSS-variables" class="link external" target="_blank">Why “variables” in CSS are harmful</a></li>
    <li><a href="http://www.xanthir.com/blog/b4AD0" class="link external" target="_blank">CSS Variables Draft</a></li>
    <li><a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0699.html" class="link external" target="_blank">Better Variables through Custom Properties from Tab Atkins Jr. on 2011-10-24</a></li>
  </ol>
</div>

<footer class="author-block typeset">
  <h2>The Author, Peter Gasston</h2>

  <p><img class="float-left" src="https://si0.twimg.com/profile_images/391831398/peter_opie.png" width="120" height="120" alt="Peter Gasston"> <a href="http://www.petergasston.co.uk/">Peter Gasston</a> works as a developer at <a href="http://top10.com/">Top10</a> and codes mainly client-side languages (although he’s familiar with server-side as well). Peter is a keen advocate of open web standards, is the author of <a href="http://nostarch.com/css3.htm"><i>The Book of CSS3: A Developer’s Guide to the Future of Web Design</i></a> (released May 2011), and has written for .Net magazine and <a href="http://www.css3.info/">CSS3.info</a>.</p>

    <p>Peter blogs on technical issues at <a href="http://www.broken-links.com/">Broken-Links.com</a>, has spoken at <a href="http://ignitelondon.net/">Ignite London</a> as well as various other web development meetings, and can often be found under the user name of ‘stopsatgreen’ (clever anagram).</p>

    <p>Connect with Peter on Twitter at <a href="https://twitter.com/#!/stopsatgreen">@stopsatgreen</a> and <a href="http://lanyrd.com/profile/stopsatgreen/">Lanyrd.com</a>.</p>
</footer>

</article>