Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----


// bourbon funkcija
@function em($pxval, $base: $em-base) {
  @if not unitless($pxval) {
      $pxval: strip-units($pxval);
  }
  @if not unitless($base) {
      $base: strip-units($base);
  }
  @return ($pxval / $base) * 1em;
}

// neka naša ekstra funkcija
@function mq-em($pxval) {
    @return em($pxval, 16);
}

// base font
$em-base: 12;

// breakpoint varijabla
$bp-beta-s: 600;

// fallback za ie
$fix-mq: false !default;

// breakpint mixin
@mixin bp($point) {
    @if $fix-mq {
        @if $fix-mq >= $point {
            @content;
        }
    }
    @else {
        @media screen and (min-width: em($point, 16)) {
            @content;
        }
    }
}

// primjer
.Contact-title {
    margin-bottom: 20px;
    @include bp($bp-beta-s) {
        margin-left: percentage(1/16);
    }
}

// primjer bez mixina
.Contact-subtitle {
  padding: 10px;
  @media screen and (min-width:mq-em($bp-beta-s)) {
    padding: 15px;
  }
}

SassMeister-output.css

.Contact-title {
  margin-bottom: 20px;
}
@media screen and (min-width: 37.5em) {
  .Contact-title {
    margin-left: 6.25%;
  }
}

.Contact-subtitle {
  padding: 10px;
}
@media screen and (min-width: 37.5em) {
  .Contact-subtitle {
    padding: 15px;
  }
}