view-margins mixin

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$breakpoints: (
  small: 482px,
  medium: 752px,
  large: 1022px,
  xlarge: 1312px,
  xxlarge: 1600px
) !default;

@mixin respond-to($breakpoint) {
  @if variable-exists(breakpoints) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Infelizmente o mapa '$breakpoints' não existe.";
  }
}

$view-margins: (
  xsmall: 6vw,
  small: 3vw,
  medium: 3vw,
  large: 2.5vw,
  xlarge: 2vw
) !default;

@mixin view-margins($properties...) {
  $properties-length: length($properties);
  
  @if $properties-length == 0 {
    $properties: (padding-right, padding-left);
  }
  
  @each $property in $properties {
    #{$property}: map-get($view-margins, xsmall);
  }
  
  @each $breakpoint, $value in $breakpoints {
    @include respond-to($breakpoint) {
      @each $property in $properties {
        #{$property}: map-get($view-margins, $breakpoint);
      }
    }
  }
}

.class {
  @include view-margins;
}
.class2 {
  @include view-margins(right);
}

SassMeister-output.css

.class {
  padding-right: 6vw;
  padding-left: 6vw;
}
@media (min-width: 482px) {
  .class {
    padding-right: 3vw;
    padding-left: 3vw;
  }
}
@media (min-width: 752px) {
  .class {
    padding-right: 3vw;
    padding-left: 3vw;
  }
}
@media (min-width: 1022px) {
  .class {
    padding-right: 2.5vw;
    padding-left: 2.5vw;
  }
}
@media (min-width: 1312px) {
  .class {
    padding-right: 2vw;
    padding-left: 2vw;
  }
}

.class2 {
  right: 6vw;
}
@media (min-width: 482px) {
  .class2 {
    right: 3vw;
  }
}
@media (min-width: 752px) {
  .class2 {
    right: 3vw;
  }
}
@media (min-width: 1022px) {
  .class2 {
    right: 2.5vw;
  }
}
@media (min-width: 1312px) {
  .class2 {
    right: 2vw;
  }
}