Posted: August 27, 2015, filed under: Tutorials+Tips

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.

Tagged: css, mixin, sass