font-face builder

font-face-builder.scss

$font-family: (
        group: serif,
        id: regular,
        name: 'Equity Regular',
        fallback: (georgia, serif),
        weight: normal,
        style: normal,
        file-name: 'equity_text_b_regular-webfont'
), (
        group: serif,
        id: regular-italic,
        name: 'Equity Italic',
        fallback: (georgia, serif),
        weight: normal,
        style: normal,
        file-name: 'equity_text_b_italic-webfont'
), (
        group: serif,
        id: bold,
        name: 'Equity Bold',
        fallback: (georgia, serif),
        weight: normal,
        style: normal,
        file-name: 'equity_text_b_bold-webfont'
), (
        group: serif,
        id: bold-italic,
        name: 'Equity Bold Italic',
        fallback: (georgia, serif),
        weight: normal,
        style: normal,
        file-name: 'equity_text_b_bold_italic-webfont'
), (
        group: sans,
        id: regular,
        name: 'Concourse Regular',
        fallback: (sans-serif),
        weight: normal,
        style: normal,
        file-name: 'concourse_t3_regular-webfont'
), (
        group: sans,
        id: bold,
        name: 'Concourse Bold',
        fallback: (sans-serif),
        weight: normal,
        style: normal,
        file-name: 'concourse_t7_regular-webfont'
);

/*
 * FONT-FACE GENERATOR
 *
 * @font-face {
 *   font-family: "Equity Bold";
 *   src: url("../font/equity_text_b_bold-webfont.woff2") format("woff2"),
 *        url("../font/equity_text_b_bold-webfont.woff") format("woff");
 * }
*/

$font-src: '../font/';
$font-extensions: ('woff2', 'woff');

@each $font in $font-family {
    @font-face {
        font-family: map-get($font, name);
        
        $extensions: ();
        @each $ext in $font-extensions {
            $extensions: append($extensions, url('#{$font-src}#{map-get($font, file-name)}.#{$ext}') format($ext), 'comma');
        }
        
        src: $extensions;
    }
}

/*
 * GET FONT-FAMILY
 *
 * h1 { @include font(serif, bold); }
 *
 * h1 {
 *   font-family: "Equity Bold", georgia, serif;
 *   font-weight: normal;
 *   font-style: normal;
 * }
 *
*/

@mixin font($group, $id:regular) {
    @each $font in $font-family {
        @if ($group == map-get($font, group) and $id == map-get($font, id)) {
            font-family: map-get($font, name), map-get($font, fallback);
            font-weight: map-get($font, weight);
            font-style: map-get($font, style);
        }
    }
}

inspiration http://hmphry.com/useful-sass-mixins

https://github.com/pixelperfectcss/pixelperfectcss-scss/blob/master/pixelperfectcss-settings.scss#L22 burda uygulama için renk tanımlaması yapıp daha sonra bunları ayrıca değişken olarakta tanımlıyordum. map-get ile direk çözmüş oldum background: #{map-get($property-color, "black")};