Separating text and size styles to allow for super flexible typography. I usually define a bunch of title styles and add modifiers to them to adjust the color and whatnot. For this design, I first wrote down all the properties for every title and started to pull out common properties. By pulling all the sizes out into their own classes I can def…

gistfile1.sass

// TEXT STYLES
// --------------------------------------------

.text-1
  color: $dark-text
  text-transform: uppercase

.text-2
  color: $blue
  text-transform: uppercase
  font-weight: bold

.text-3
  color: white
  text-transform: uppercase

.text-4
  color: lighten($text, 10%)
  text-transform: uppercase
  font-weight: bold

.text-5
  color: $light-text
  font-weight: bold

index.html

<article class="padding-y-2">
  <span class="text-4 size-3">20/02/2013</span>
  <a class="link-1 size-3" href="#">Lion: The natural predator of Hyperspaces</a>
</article>

sizes.sass

// FONT SIZES
// --------------------------------------------

.size-1
  @include baseline(0.5)
  font-size: 14px

.size-2
  @include baseline(1)
  font-size: 16px

.size-3
  @include baseline(1)
  font-size: 18px

.size-4
  @include baseline(1)
  font-size: 22px

.size-5
  @include baseline(1.25)
  font-size: 30px

.size-6
  @include baseline(1.5)
  font-size: 48px

.size-7
  @include baseline(2)
  font-size: 60px

.size-8
  @include baseline(2)
  font-size: 80px