SASS Mixins

mixin-cover-div.scss

@mixin cover-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

mixin-csst-breakpoints.scss

$breakpoints: (
    'sm': 767px,
    'md': 992px,
    'lg': 1200px
) !default;

/// Mixin to manage responsive breakpoints
/// author: Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin bp($breakpoint) {
    // If the key exists in the map
    @if map-has-key($breakpoints, $breakpoint) {
      // Prints a media query based on the value
      @media (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
      }
    }
   
    // If the key doesn't exist in the map
    @else {
      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
          + "Available breakpoints are: #{map-keys($breakpoints)}.";
    }
  }

mixin-easing-map-get.scss

$ease: (
    in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530),
    in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190),
    in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220),
    in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060),
    in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715),
    in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035),
    in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335),
    in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045),
    out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940),
    out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000),
    out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000),
    out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000),
    out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000),
    out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000),
    out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000),
    out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275),
    in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955),
    in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000),
    in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000),
    in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000),
    in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950),
    in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000),
    in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860),
    in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550)
);

@function ease($key) {
    @if map-has-key($ease, $key) {
        @return map-get($ease, $key);
    }

    @warn "Unkown '#{$key}' in $ease.";
    @return null;
}

/*---------- USAGE:

.example {
  animation: there-and-back 2.5s ease(in-quad) infinite alternate;
}

*/

mixin-fontface-example.scss

// example font-face file

/* -----------------------------------------
  Geometrica Font
------------------------------------------*/

// Source:
// -------
// DesignCuts: Exceptional Best-Selling Fonts Complete
// Latinotype

// variables
$path-prefix: './webfonts';
$font-subfolder: 'geometrica';
$font-name: 'Geometrica';
$font-family: 'geometrica';
$font-formats: EOT WOFF SVG TTF;

@import 'mixin-fontface';

/* Thin */
@include fontFace( #{$font-name}-Thin, 100, normal );
/* Thin Italic */
@include fontFace( #{$font-name}-ThinIt, 100, italic );
/* Extra Light */
@include fontFace( #{$font-name}-ExtraLight, 200, normal );
/* Extra Light Italic */
@include fontFace( #{$font-name}-ExtraLightIt, 200, italic );
/* Light */
@include fontFace( #{$font-name}-Light, 300, normal );
/* Light Italic */
@include fontFace( #{$font-name}-LightIt, 300, italic );
/* Book */
@include fontFace( #{$font-name}-Book, 400, normal );
/* Book Italic */
@include fontFace( #{$font-name}-BookIt, 400, italic );
/* Regular */
@include fontFace( #{$font-name}-Regular, 500, normal );
/* Regular Italic */
@include fontFace( #{$font-name}-RegularIt, 500, italic );
/* Medium */
@include fontFace( #{$font-name}-Medium, 600, normal );
/* Medium Italic */
@include fontFace( #{$font-name}-MediumIt, 600, italic );
/* Bold */
@include fontFace( #{$font-name}-Bold, 700, normal );
/* Bold Italic */
@include fontFace( #{$font-name}-BoldIt, 700, italic );
/* Extra Bold */
@include fontFace( #{$font-name}-ExtraBold, 800, normal );
/* Extra Bold Italic */
@include fontFace( #{$font-name}-ExtraBoldIt, 800, italic );
/* Black */
@include fontFace( #{$font-name}-Black, 900, normal );
/* Black Italic */
@include fontFace( #{$font-name}-BlackIt, 900, italic );


// There's also an Extra Black

// /* Extra Black */
// @include fontFace( #{$font-name}-ExtraBlack, 900, normal );
// /* Extra Black Italic */
// @include fontFace( #{$font-name}-ExtraBlackIt, 900, italic );

mixin-fontface.scss

/**
  *  ----------------------------------------
  *  Usage
  *  ----------------------------------------
  *  (1) Set 'variables' below to override the defaults
  * 
  *  (2) Include this mixin
  *  @import 'mixin-fontface';
  *  
  *  (3) Add this line for each weight & style, preferably in separate scss files:
  *  @include fontFace( #{$font-name}<-weight>, <weight numbers>, <font style> );
  */

// variables
$path-prefix: '../webfonts' !default;
$font-subfolder: '' !default;
$font-name: 'generic-font-name' !default;
$font-family: $font-name !default;
$font-formats: EOT WOFF SVG TTF !default; // EOT WOFF WOFF2 SVG OTF TTF

// append slash
@if $font-subfolder not "" {
  $font-subfolder: "#{$font-subfolder}/";
}

// subfolders for each font format
$EOT:   '#{$font-subfolder}EOT' !default;
$WOFF:  '#{$font-subfolder}WOFF' !default;
$WOFF2: '#{$font-subfolder}WOFF2' !default;
$OTF:   '#{$font-subfolder}OTF' !default;
$SVG:   '#{$font-subfolder}SVG' !default;
$TTF:   '#{$font-subfolder}TTF' !default;

// list to contain formats
$format-list: parseFontList($font-formats);

//  ----------------------------------------------
//  fontFace
//
//  Compiles to a font face rule.
//  Uses variables set above.
//  ----------------------------------------------
@mixin fontFace( $filename, $fw, $fs ) {
  // blank list to compile
  $font-list: ();
  // if format listed, add to compile list
  @if index($font-formats, 'EOT') {
    $font-list: append(
      $font-list, 
      unquote("url(#{$path-prefix}/#{$EOT}/#{$filename}.eot?#iefix) format('embedded-opentype')"), 
      comma
    );
  }
  @if index($font-formats, 'WOFF') {
    $font-list: append(
      $font-list, 
      unquote("url(#{$path-prefix}/#{$WOFF}/#{$filename}.woff) format('woff')"), 
      comma
    );
  }
  @if index($font-formats, 'WOFF2') {
    $font-list: append(
      $font-list, 
      unquote("url(#{$path-prefix}/#{$WOFF2}/#{$filename}.woff2) format('woff2'),"), 
      comma
    );
  }
  @if index($font-formats, 'SVG') {
    $font-list: append(
      $font-list, 
      unquote("url(#{$path-prefix}/#{$SVG}/#{$filename}.svg##{$font-name}) format('svg')"), 
      comma
    );
  }
  @if index($font-formats, 'TTF') {
    $font-list: append(
      $font-list, 
      unquote("url(#{$path-prefix}/#{$TTF}/#{$filename}.ttf) format('truetype')"), 
      comma
    );
  }
  @if index($font-formats, 'OTF') {  
    $font-list: append(
      $font-list, 
      unquote("url(#{$path-prefix}/#{$OTF}/#{$filename}.otf) format('opentype');"), 
      comma
    );
  }
  // create @font-face rule
  @font-face {
    font-family: $font-family;
    font-weight: $fw;
    font-style: $fs;
    src:
      $font-list
      ;
  }
}

mixin-gradient-underlines.scss

@mixin trans {
  transition: all 0.5s;
}
a {
  position: relative;
  padding-bottom: 0px;
  text-decoration: none;
  color: #666;
  @include trans;
}
a:hover {
  color: tomato;
  @include trans;
}
a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  height: 2px;
  width: 0%;
  opacity: 0;
  background: #444;
  background: linear-gradient(
      left, 
      transparent 0%,
      lighten(tomato, 20%) 20%,
      tomato 50%,
      lighten(tomato, 20%) 80%,
      transparent 100%
  );
  @include trans;
}

a:hover::after {
  left: 0%;
  width: 100%;
  bottom: -2px;
  opacity: 1;
  @include trans;
}

.isolated {
  padding: 2rem;
  text-align: center;
  font-size: 1.5rem;
}

mixin-linear-grad.scss

@mixin linear-gradient($direction:to bottom, $color-stops...) {
	background: nth(nth($color-stops, 1), 1);
	background: -webkit-linear-gradient($direction, $color-stops);
	background: linear-gradient($direction, $color-stops);
}

mixin-viewport-sized-type.scss

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback), 
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///
@mixin responsive-font( $responsive, $min, $max: false, $fallback: false ) {
    $responsive-unitless: $responsive / ($responsive - $responsive + 1);
    $dimension: if(unit($responsive) == 'vh', 'height', 'width');
    $min-breakpoint: $min / $responsive-unitless * 100;

    @media (max-#{$dimension}: #{$min-breakpoint}) {
        font-size: $min;
    }
    
    @if $max {
        $max-breakpoint: $max / $responsive-unitless * 100;
      
        @media (min-#{$dimension}: #{$max-breakpoint}) {
            font-size: $max;
        }
    }
    
    @if $fallback {
        font-size: $fallback;
    }
    
    font-size: $responsive;
}

/// USAGE
/*

@include responsive-font(5vw, 35px, 150px, 50px);

*/