Generated by SassMeister.com.

SassMeister-input.scss

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

/* way 1: media query inside of the selector */
.error {
  color: red;
  @media screen and (max-width: 320px) {
    color: blue;
  }
}

/* way 2: selector inside of the media query */
.error {
  color: red;
}
@media screen and (max-width: 320px) {
  .error {
    color: blue;
  }
}

.error-important {
  @extend .error;
  font-weight: bold;
}

SassMeister-output.css

/* way 1: media query inside of the selector */
.error, .error-important {
  color: red;
}

@media screen and (max-width: 320px) {
  .error, .error-important {
    color: blue;
  }
}

/* way 2: selector inside of the media query */
.error, .error-important {
  color: red;
}

@media screen and (max-width: 320px) {
  .error, .error-important {
    color: blue;
  }
}

.error-important {
  font-weight: bold;
}