gistfile1.txt

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@mixin vertical-align-flex {
    display: flex;
    align-items: center;
    -ms-flex-align: center;
}

gistfile2.txt

/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
 
@function between($to, $from, $toWidth, $fromWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;

  @return calc(#{$base} + #{100vw * $slope});
}

$small: 400px; 
$large: 1000px;

/**
 * Mixin to apply base and media queried values 
 * for the between @function.
 * Defaults to/from: $small/$large, but can be overridden.
 */

@mixin between($property, $to, $from, $toWidth: $small, $fromWidth: $large) {
  #{$property}: $to;

  @media (min-width: $toWidth) {
    #{$property}: between($to, $from, $small, $large);
  }

  @media (min-width: $fromWidth) {
    #{$property}: $from;
  }

}

* {
  box-sizing: inherit;
}

html, body {
  box-sizing: border-box;
}

.Container {
  align-items: center;
  background-color: #0087be;
  border: 10px solid #f25292;
  display: flex;
  @include between(padding, 20px, 100px);
}

.Element {
  background-color: #252A34;
  border-radius: 3px;
  width: 100%;
  @include between(height, 100px, 20px);
}

gistfile3.txt

@function background-focus($ratio, $bg, $box: 50) {
  @return (($bg + (50 - $box)/$ratio - 50) * ($ratio / ($ratio - 1)) + 50) * 1%;
}

.window {
  box-sizing: border-box;
  width: 200px;
  height: 40px;
  margin: 1em 0;
  border: 1px solid magenta;
  background-image: url('https://cl.ly/jd3H/ruler.png');
  background-repeat: no-repeat;
}

.window--bg-25-75 {
  background-position-x: background-focus(4, 25, 75);
}