Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

// Mixin @each vendor
@mixin vendor($prop, $args) {
  @each $vendor in webkit, moz, ms, o {
    -#{$vendor}-#{$prop}: $args;
  }
  #{$prop}: $args;
}

.border-radius {
  @include vendor(border-raius,5px);
}

//////////////////////////////////////////

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.icon-error {
  @extend %icon;
  color: red;
}

.icon-info {
  @extend %icon;
  color: blue;
}

//////////////////////////////////////////

@mixin media($type) {
  @if $type == tablet {
    @media only screen and (min-width:768px) and (max-width:991px) {
      @content;
    }
  }
  @else if $type == mobile {
    @media only screen and (max-width:767px) {
      @content;
    }
  }
}


.content {
  width: 960px;
  @include media(tablet) {
    width: 720px;
  }
  @include media(mobile) {
    width: 90%;
  }
}

SassMeister-output.css

.border-radius {
  -webkit-border-raius: 5px;
  -moz-border-raius: 5px;
  -ms-border-raius: 5px;
  -o-border-raius: 5px;
  border-raius: 5px;
}

.icon-error, .icon-info {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.icon-error {
  color: red;
}

.icon-info {
  color: blue;
}

.content {
  width: 960px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .content {
    width: 720px;
  }
}
@media only screen and (max-width: 767px) {
  .content {
    width: 90%;
  }
}