VW Mixins

vw.scss

/*
How to Use:
@include vw((padding-top, padding-bottom), 40px);

If needs rewrite some property, use:

@include vw((padding-top, padding-bottom), 40px, $min-vw: mq('laptop'));
*/

@mixin vw($property, $min-value, $max-value: $min-value, $min-vw: mq('mobile'), $max-vw: mq('tv')) {
  & {
    // If property is a list, loop the items and set the media queries
    @if( type-of( $property ) == 'list' ) {
      @each $item in $property {
        @include fluid-vw-mq($min-vw, $max-vw, $min-value, $max-value, $item);
      }
    }

    @if( type-of( $property ) == 'string' ) {
      @include fluid-vw-mq($min-vw, $max-vw, $min-value, $max-value, $property);
    }
  }
}

@mixin fluid-vw-mq( $min-vw, $max-vw, $min-value, $max-value, $property ) {
  @include min-screen($min-vw) {
    #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
  }

  @if( $max-value != $min-value ) {
    @include min-screen($max-vw) {
      #{$property}: $max-value;
    }
  }
}