Last Updated: February 25, 2016
·
426
· camwhite

My Mixins & Functions

/**
 * Mixins & Functions
 */

@function get-vw($target) {
  $vw-context: (1000*.01) * 1px;
  @return ($target/$vw-context) * 1vw;
}

@mixin responsive-font($init, $scaled) {
  font-size: $init;
  @media screen and ($tablet) {
    font-size: $scaled;
  }
}

@mixin responsive-window($bg) {
  position: relative;
  height: 100vh;
  background: $bg;
}

@mixin align-hack {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin randomizer($multiple, $lum) {
  @for $i from 1 through 110 {
    &:nth-child(#{$i}) {
      background: hsl($multiple * $i, 100%, $lum);
    }
  }
}

@mixin vw($base-size, $break-size, $breakpoint) {
  font-size: get-vw($base-size);
  letter-spacing: -1px;
  @media screen and ($breakpoint) {
    font-size: $break-size;
  }
}

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