scss Mixins Sass

Posted 2021-05-17

/* Margin bottom ranges .mb-1, .mb-2, ... */

$iphone5: 'screen and (device-aspect-ratio: 40/71)';

@mixin mb($number) {
  margin-bottom: calc(#{$number}vh * 2);

  @media #{$iphone5} {
    margin-bottom: calc(#{$number}vh * 1.5);
  }
}

@for $numbers from 1 through 7 {
  @each $number in $numbers {
    .mb-#{$number} {
      @include mb($number);
    }
  }
}

/* Another way */
@mixin mb {
  @for $numbers from 1 through 7 {
    @each $number in $numbers {
      &-#{$number} {
        margin-bottom: calc(#{$number}vh * 1.5);

        @media #{$iphone5} {
          margin-bottom: calc(#{$number}vh * 0.7);
        }
      }
    }
  }
}

.mb {
  @include mb();
}