Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="foo">
<p>Lorum Ipsum</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Bourbon (v4.2.0)
// Include Media (v1.1.2)
// ----

@import "include-media";
@import "bourbon/bourbon";

$white: #fff;
$light_gray2: #eaeaea;
$light_gray: #ccc;
$medium_gray: #999;
$medium_gray2: #666;
$charcoal_gray: #333;
$dark_gray: #202020;
$black: #000;
$olive_green: #6a8500;
$pink: #b72898;
$purple: #491f70;
$purple_light: #b58dd9;
$purple_accent: #7629bd;

body {
font-family: verdana;
}

.foo {
  padding: 2%;
  color: $white;
  background-color: #eaeaea;
  border: 1px dotted #ccc;
  @include linear-gradient(150deg, $charcoal_gray 0%, $dark_gray 0, $medium_gray2 51%, $medium_gray2 100%);
  @include media(">phone", "<=980px") {
    color: #333;
    @include linear-gradient(30deg, $purple_light 8%, $olive_green 0, $pink 22%, $medium_gray2 100%);
  }
  p {
    font-size: 2rem;
  }
}

SassMeister-output.css

body {
  font-family: verdana;
}

.foo {
  padding: 2%;
  color: #fff;
  background-color: #eaeaea;
  border: 1px dotted #ccc;
  background-color: #333;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(0, #202020), color-stop(51%, #666), color-stop(100%, #666));
  background-image: -webkit-linear-gradient(-420deg, #333 0%, #202020 0, #666 51%, #666 100%);
  background-image: linear-gradient(150deg,#333 0%, #202020 0, #666 51%, #666 100%);
}
@media (min-width: 321px) and (max-width: 980px) {
  .foo {
    color: #333;
    background-color: #b58dd9;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #b58dd9), color-stop(0, #6a8500), color-stop(22%, #b72898), color-stop(100%, #666));
    background-image: -webkit-linear-gradient(-300deg, #b58dd9 8%, #6a8500 0, #b72898 22%, #666 100%);
    background-image: linear-gradient(30deg,#b58dd9 8%, #6a8500 0, #b72898 22%, #666 100%);
  }
}
.foo p {
  font-size: 2rem;
}

SassMeister-rendered.html

<div class="foo">
<p>Lorum Ipsum</p>
</div>