config/themes/default/grunt/scss/_mixins.scss
/*
  @mixin icon-type

  Inserts an icon class with a name and optional width/height

  Parameters:
  $type - name of the icon
  $minWidth - optional, number, width of the icon
  $minHeight - optional, number, height of the icon
  $include - force include of SVG data
*/
@mixin icon-type($type,$minWidth:0,$minHeight:0,$include:false) {
  @if map-has-key($icons, $type) {
    $svg: map-get($icons, $type);
    %icon__#{$type},
    .icon__#{$type} {
      @include background-image("#{$type}",$include);
      //
      @if $include_icons == false {
        @if $minWidth > 0 {
          width: $minWidth*1px;
        } @else {
          width: map-get($svg, width);
        }
        @if $minHeight > 0 {
          height: $minHeight*1px;
        } @else {
          height: map-get($svg, height);
        }

      }
      &:hover {
        @extend %icon__#{$type}_hover !optional;
      }
    }
  }
}

/*
  @mixin background-image

  Inserts an encoded SVG background image from the $icons sass map

  Parameters:
  $file_name - name of icon
  $include - include SVG data in stylesheet, overrides global $include_icons var
*/
@mixin background-image($file_name,$include:false) {
  @if map-has-key($icons, $file_name) {
    // if the sass map has a ref with the file name specified
    @if $include == true or $include_icons == true {
      // if include icons is specified as true or the global include icons is true
      // stick the encoded SVG data in
      $svg: map-get($icons, $file_name);
      background-image: url(map-get($svg, datauri));
    }
    @if $include == false or ($include == true and $include_icons == false) {
      // don't include the encoded SVG data
      background-repeat: no-repeat;
      // but do include the fallback png link (this is commented because svg2png is no longer maintained and working on MAC OS Sierra - browser support of SVGs is good)
      // .no-svg & {
      //   background-image: url('#{$path_img}fallback/#{$file_name}.png');
      // }
    }
  } @else {
    @warn "Unknown `#{$file_name}` in $images.";
  }
}

/*
  @mixin breakpoint

  Inserts a media query block

  Parameters:
  $point - name of the breakpoint
*/
@mixin breakpoint($point) {
  @if map-has-key($breakpoints, $point) {
    @media #{map-get($breakpoints, $point)} {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint `#{$point}` in $breakpoints.";
  }
}

@mixin reset-btn {
  -webkit-box-shadow: none;
  -ms-touch-action: manipulation;
  -webkit-appearance: none;
  /*background-color:transparent;*/
  background-image: none;
  border:0 none;
  box-shadow: none;
  cursor:pointer;
  font-size:1em;
  margin:0;
  outline: 0;
/*  padding:0;*/
  text-align:left;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;

  &:focus {
    outline: 0;
    outline-offset: -2px;
  }
}

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin user-select($select: none) {
  -webkit-user-select: $select;
  -khtml-user-select: $select;
  -moz-user-select: $select;
  -ms-user-select: $select;
  user-select: $select;
}

@mixin font-smoothing($value: on) {
  @if $value == on {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

@function em($target, $context: 15px) {
  @if $target == 0 { @return 0 }
  @return $target / $context + 0em;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@function percent($size, $master : 1000px) {
  @if $size == 0 { @return 0 }
  @return $size / $master * 100%;
}