mixins

mixins.css

@mixin flex($direction: center) {
  @include display(flex);
  @include align-items($direction);
  @include justify-content($direction);
}

.flex-center { @include flex(center);}
.flex-start  { @include flex(start);}
.flex-end    { @include flex(end);}

@mixin size($length: 32px) {
  height: $length;
  width: $length;
}

.16px{@include size(16px);}
.32px{@include size(32px);}
.128px{@include size(128px);}
.256px{@include size(256px);}

@mixin gradient($color: deeppink, $color1: dodgerblue, $direction: left){
  linear-gradient($color, $color1) $direction repeat);
}

@mixin transition ($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@include transition(color .3s ease, font-size .5s ease);

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

@include font-size(14px);