SASS Mixins

mixin-asset-helper.scss

// ----------------------------------------
//   Hugo Giraudel's Simple Asset Helper Function on CSS-Tricks
//   https://css-tricks.com/snippets/sass/simple-asset-helper-functions/
// ----------------------------------------

/// Base path for assets (fonts, images...),
/// should not include trailing slash
/// ----------------------------------------
/// @ access public
/// @ type String
///
$asset-base-path: '../assets' !default;

/// Asset URL builder
/// ----------------------------------------
/// @ access private
/// @ param {String} $type - Asset type, matching folder name
/// @ param {String} $file - Asset file name, including extension
/// @ return {URL} - A `url()` function leading to the asset
///
@function asset($type, $file) {
  @return url($asset-base-path + '/' + $type + '/' + $file);
}

/// Image asset helper
/// ----------------------------------------
/// @ access public
/// @ param {String} $file - Asset file name, including extension
/// @ return {URL} - A `url()` function leading to the image
/// @ require {function} asset
///
@function image($file) {
  @return asset('images', $file);
}

/// Font asset helper
/// ----------------------------------------
/// @ access public
/// @ param {String} $file - Asset file name, including extension
/// @ return {URL} - A `url()` function leading to the font
/// @ require {function} asset
///
@function font($file) {
  @return asset('fonts', $file);
}

/// USAGE
/*
@font-face {
    font-family: 'Unicorn Font';
    src: font('unicorn.eot?') format('eot'),
         font('unicorn.otf') format('truetype'),
         font('unicorn.woff') format('woff'),
         font('unicorn.svg#unicorn') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  
  .foo {
    background-image: image('kittens.png');
  }

  */

mixin-center-without-flex.scss

// center without flexbox or grid
//
@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// EXAMPLES ----------------------------------------

.parent {
  position: relative;
}
.child {
  @include centerer;
}

// ----------------------------------------

// adding option for horizontal or vertical or both
//
@mixin fancy-centerer($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

// EXAMPLES ----------------------------------------

.parent {
  position: relative;
}
.child-both {
  @include centerer;
}
.child-horizontal {
  @include centerer(true, false);
}
.child-vertical {
  @include centerer(false, true);
}

mixin-responsive-font.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;
}

Added Eduardo Boucas' Responsive Font Mixin on CSS-Tricks

Added Chris Coyer's Centering Mixin, to center items without flexbox or grid