Skip to content

Instantly share code, notes, and snippets.

@Limonadovy-joe

Limonadovy-joe/_mixins.scss

Last active February 1, 2022 12:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Limonadovy-joe/b0187ad4af1fe9be0a4320fcf4185b8f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Limonadovy-joe/b0187ad4af1fe9be0a4320fcf4185b8f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Limonadovy-joe revised this gist Feb 1, 2022. No changes.
  2. Limonadovy-joe revised this gist Feb 1, 2022. 1 changed file with 0 additions and 5 deletions.
    5 changes: 0 additions & 5 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,10 +3,6 @@
    @import "./_helpers.scss";
    @import "./_variables.scss";

    /**
    * webfonts
    */

    /// Output a @font-face declaration
    /// @access public
    /// @group webfonts
    @@ -16,7 +12,6 @@
    /// @param {String} $style
    /// @param {List} $extensions - single extensions of font files to include in src
    /// @require {String} $theme-webfonts-base-url - base url of webfonts, can be an absolute HTPP or relative

    @mixin font-face(
    $family,
    $path,
  3. Limonadovy-joe created this gist Jan 28, 2022.
    85 changes: 85 additions & 0 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    @use "sass:map";
    @use "sass:string";
    @import "./_helpers.scss";
    @import "./_variables.scss";

    /**
    * webfonts
    */

    /// Output a @font-face declaration
    /// @access public
    /// @group webfonts
    /// @param {String} $font-family - name of font-family
    /// @param {String} $path - address of the source font, can be an absolute HTPP or relative
    /// @param {Number} $weight
    /// @param {String} $style
    /// @param {List} $extensions - single extensions of font files to include in src
    /// @require {String} $theme-webfonts-base-url - base url of webfonts, can be an absolute HTPP or relative

    @mixin font-face(
    $family,
    $path,
    $weight: 400,
    $style: normal,
    $exts: eot eotfix woff2 woff ttf otf svg
    ) {
    $src: $webfonts-base-url;

    //types of font files that have different names of format with compared to its extensions
    $formats: (
    otf: "opentype",
    ttf: "truetype",
    eotfix: "embedded-opentype",
    );

    @each $ext in $exts {
    $ext-types-with-postfix: (
    eotfix: (
    //IE6-IE8
    format:
    "?#iefix",
    addition: "eot",
    pos: "start",
    ),
    svg: (
    //Legacy iOS
    format:
    "svg#",
    addition: #{$family},
    pos: "end",
    ),
    );

    $ext-type: if(
    map.has-key($ext-types-with-postfix, $ext),
    map.get($ext-types-with-postfix, $ext, "format"),
    quote($ext)
    );
    $format: if(
    map.has-key($formats, $ext),
    map.get($formats, $ext),
    quote($ext)
    );

    //additional insert values to ext-type
    @if map.has-key($ext-types-with-postfix, $ext) {
    $addition: map.get($ext-types-with-postfix, $ext, "addition");
    $pos: map.get($ext-types-with-postfix, $ext, "pos");
    $ext-type: str-insert($ext-type, $addition, $pos);
    }

    $font-url: url($path + "." + $ext-type);
    $font-format: format($format);
    $font-src: $font-url $font-format;

    $src: append($src, $font-src, comma);
    }

    @font-face {
    font-family: $family;
    font-style: $style;
    font-weight: $weight;
    src: $src;
    }
    }