Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$media-breakpoints: (
  phone: 480px,
  tablet: 760px,
  desktop: 1200px
);
 
@mixin media-query($size) { 
  @if map-has-key($media-breakpoints, $size) {
    @media screen and (min-width: #{map-get($media-breakpoints, $size)}) {
      @content;
    }
  }
}
 
.page-section {
  width: 100%;
 
  @include media-query(tablet) {
    font-size: 15px;
  }
 
  @include media-query(phone) {
    width: 50%;
  }
}

SassMeister-output.css

.page-section {
  width: 100%;
}

@media screen and (min-width: 760px) {
  .page-section {
    font-size: 15px;
  }
}

@media screen and (min-width: 480px) {
  .page-section {
    width: 50%;
  }
}