I’ve made a few websites over the past year or so, and I finally feel like I’ve nailed down the process. Of course there’s a lot more to it, but potentially the most useful, simple, and adorably named part has been a typography mixin I call upperspace
:
@mixin upperspace {
letter-spacing: 1px;
text-transform: uppercase;
}
I’ve been jamming on a class called .meta
lately as well, and they work together nicely:
$size-base: 1.1rem;
$size-sml: $size-base*0.8;
$color-text-meta: #999;
.meta {
color: $color-text-meta;
font-size: $size-sml;
}
.meta--upper {
@extends meta;
@include upperspace;
}
I’ve been a little anti-extends lately, but after reading Una Kravet’s post on Atomic OOBEMITSCSS (nice), I’ve opened up to them again.
Anyhow, just a simple Sassy snippet for your viewing pleasure.