SCSS – inclusão de fonte de resumo

Você já se viu examinando todos os seus arquivos SCSS para substituir uma fonte por uma mais bonita que acabou de encontrar? Ou você antecipou isso e colocou a referência da fonte em uma variável? Você também levou em consideração o fato de que sua nova fonte não suporta aquela espessura de fonte específica que sua fonte anterior suportava?

Eu me peguei lutando com isso ocasionalmente, então escrevi um mixin que abstrai a família da fonte (e o peso) de seu propósito final.

Primeiro configure suas pilhas de fontes em um Mapa SASS (SASS 3.3 necessário)

@ import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700|Titillium+Web:600);

$fonts: (
    body: (stack: ('Open Sans', Arial, sans-serif), weights: (normal: 400, bold: 700)),
    headers: (stack: ('Titillium Web', Arial, sans-serif), weights: (normal: 600, bold: 600))
);

Em seguida, use-o em qualquer lugar do seu SCSS

body {
    @include font(body, normal);
}

h1 {
    @include font(headers, bold);
}

O resultado:

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 400;
}

h1 {
    font-family: 'Titillium Web', Arial, sans-serif;
    font-weight: 600;
}

O mixin

//
// Font setter through abstracted labels
@mixin font($fontLabel, $weightLabel) {
    $fonts: (body: (stack: 'Arial', weights:(normal: 400, bold: 600) )) !default;
    $fontWeight: 400;
    $fontStack: 'None';

    // Match given type with fontstacks
    @each $fontKey, $font in $fonts {
        @if $fontLabel == $fontKey {
            // get stack and weights
            @each $elem, $value in $font {
                @if $elem == 'stack' {
                    $fontStack: $value;
                }

                @if $elem == 'weights' {
                    @each $weightKey, $weight in $value {
                        @if $weightKey == $weightLabel {
                            $fontWeight: $weight;
                        }
                    }
                }
            }
        }
    }

    // set CSS
    font-family: $fontStack;
    font-weight: $fontWeight;
}