master SASS functions, mixins, variables, and so on

L-master.scss

// functions
@function font($to, $from, $toWidth, $fromWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;
  @return calc(#{$base} + #{100vw * $slope});
}
@function convert($val, $base-font: $font-large) {
  // This works in conjunction to the `font` function when sizing
  // text, since its working off the basis of `1em` when converting.
  //
  // In order for this to work, a base/root font must be declared.
  // This function defines the root font with $font-large in $base-font.
  // That variable can be swapped for another variable.
  @if type-of($base-font) == 'number' and not unitless($base-font) {
    // This @if makes sure your base-font will always be a raw number.
    $base-font: $base-font / ($base-font * 0 + 1);
  }
  @if unitless($val) {
    // Here I makes sure you always include a unit. Current units
    // supported are listed in the paren below.
    @error $val + " needs a unit (px, em, rem)";
  } @else {
    @if unit($val) == 'px' {
      // converts $val to em
      $font-size: $val / ($val * 0 + 1);
      @return ($font-size / $base-font)+0em;
    }
    @if unit($val) == 'em' or unit($val) == 'rem' {
      // converts $val to px's
      $font-size: $val / ($val * 0 + 1);
      @return ($font-size * $base-font)+0px;
    }
  }
}
@function get-vw($object) {
  $vw: (1024 * 0.01) * 1px;
  @return ($object / $vw) * 1vw;
}
@function shadow($depth, $c: #000) {
  @if $depth>10 {
    $depth: 10;
    @warn 'cant be greater than 10';
  }
  @return 0 $depth + px ($depth * 2) + px rgba($c, (0.2 - $depth * 0.0002));
}
@function better-blur($radius) {
  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1'%3E%3CfeGaussianBlur stdDeviation='#{$radius}' result='b'/%3E%3CfeMorphology operator='dilate' radius='#{$radius}'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#a");
}
@function unitstrip($num) {
  @if type-of($num) == 'number' and not unitless($num) {
    @return $num / ($num * 0+1);
  }
  @return $num;
}
@function contrast($c, $darker, $lighter, $threshold: 50) {
  @if $threshold>100 {
    // @error "cant be over 100";
    $threshold: 100;
  }
  @if (lightness($c) >$threshold) {
    @return $darker;
  } @else {
    @return $lighter;
  }
}
@function randomNum($min, $max, $unit) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));
  @if $unit== '%' {
    @return $randomNum * 1 + $unit;
  }
  @if type-of($unit) == 'number' {
    @error 'unit must be px, pc, em, ch, %, in, cm, and so on.';
  }
  @return $randomNum + $unit;
}
@function hex() {
  $smplHex: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f');
  $randomHEX: ('#') + nth($smplHex, random(length($smplHex))) +
    nth($smplHex, random(length($smplHex))) +
    nth($smplHex, random(length($smplHex))) +
    nth($smplHex, random(length($smplHex))) +
    nth($smplHex, random(length($smplHex))) +
    nth($smplHex, random(length($smplHex)));
  @return unquote($randomHEX);
}

// variables
$near: 225ms;
$far: 375ms;
$bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$curve: cubic-bezier(0.4, 0, 0.2, 1);
$ease-in: cubic-bezier(0.4, 0, 1, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$snap: cubic-bezier(0.785, 0.135, 0.15, 0.86);

$small: 320 !default;
$medium: 600 !default;
$large: 720 !default;
$breakpoints: (
  small: $small + px,
  medium: $medium + px,
  large: $large + px
);

// Typography
$font-stack: (sans-serif);
// mixins
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $value: map-get($breakpoints, $breakpoint);
    @media screen and (max-width: $value) {
      @content;
    }
  }
  @warn 'Unknown `#{$breakpoint}` in $breakpoints';
}
@mixin checker-board($color1: #ccc, $color2: #fff, $size: 50) {
  background-color: $color2;
  background-image: linear-gradient(45deg, $color1 25%, transparent 25%),
    linear-gradient(-45deg, $color1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, $color1 75%),
    linear-gradient(-45deg, transparent 75%, $color1 75%);
  background-size: $size + 0px $size + 0px;
  background-position: 0 0, 0 ($size / 2)+0px,
    ($size / 2) + px ($size / 2 * -1) + px, -($size / 2)+0px 0px;
}
@mixin dotgrid(
  $dot: #aaa,
  $dot-background: #000,
  $dot-size: 1px,
  $dot-spacing: 22px
) {
  background: linear-gradient(
        90deg,
        $dot-background ($dot-spacing - $dot-size),
        transparent 1%
      )
      center,
    linear-gradient($dot-background ($dot-spacing - $dot-size), transparent 1%)
      center,
    $dot;
  background-size: $dot-spacing $dot-spacing;
  background-position: center;
}
@mixin gradient-border($color1, $color2, $border-width, $direction) {
  -webkit-appearance: none;
  border: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(#{$direction}, $color1 0%, $color2 100%),
    linear-gradient(#{$direction}, $color1 0%, $color2 100%);
  @if $direction== 'to right' or $direction== 'to left' {
    @if $direction== 'to right' {
      border-left: $border-width solid $color1;
      border-right: $border-width solid $color2;
    } @else {
      border-left: $border-width solid $color2;
      border-right: $border-width solid $color1;
    }
    background-position: 0 0, 0 100%;
    background-size: 100% $border-width;
  }
  @if $direction== 'to top' or $direction== 'to bottom' {
    @if $direction== 'to top' {
      border-top: $border-width solid $color2;
      border-bottom: $border-width solid $color1;
    } @else {
      border-top: $border-width solid $color1;
      border-bottom: $border-width solid $color2;
    }
    background-position: 0 0, 100% 0;
    background-size: $border-width 100%;
  }
  background-color: transparent;
  outline: none;
  &::-webkit-input-placeholder {
    color: rgba(#fff, 0.2);
    font-family: sans-serif;
    transition: all 225ms ease-in-out;
  }
}
@mixin grid(
  $col: 4,
  $row: $col,
  $gWidth: 300px,
  $gHeight: $gWidth,
  $gap: 10px
) {
  $space: unquote(' ');
  $templateCols: unquote('');
  $templateRows: unquote('');
  @for $i from 1 through $col {
    $templateCols: $templateCols + $space $gWidth;
  }
  @for $i from 1 through $row {
    $templateRows: $templateRows + $space $gHeight;
  }
  display: grid;
  grid-template-columns: $templateCols;
  grid-template-rows: $templateRows;
  grid-gap: $gap;
  @content;
}
@mixin grid-pos($colStart, $rowStart, $colEnd, $rowEnd, $target: '') {
  @if $target != '' {
    #{$target} {
      grid-column-start: $colStart;
      grid-row-start: $rowStart;
      grid-column-end: $colEnd;
      grid-row-end: $rowEnd;
    }
  } @else {
    grid-column-start: $colStart;
    grid-row-start: $rowStart;
    grid-column-end: $colEnd;
    grid-row-end: $rowEnd;
  }
}
@mixin webkit-scrollbar($c: $white, $d: 'h', $s: 4) {
  &::-webkit-scrollbar {
    @if $d == 'h' {
      width: $s + px;
    }
    @if $d == 'v' {
      height: $s + px;
    }
    &-thumb {
      background-color: rgba($c, 0.54);
      border-radius: ($s / 2)+0px;
    }
    &-track {
      background-color: rgba($c, 0.1);
      border-radius: ($s / 2)+0px;
    }
  }
}
@mixin line-clamp($lines) {
  @if $lines < 2 {
    display: inline-block;
    height: $lines + 0em;
    text-overflow: ellipses;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    height: $lines + 0em;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
  overflow: hidden;
}