Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>LALALALA</h1>
<div class="texto">lalalala</div>

SassMeister-input.scss

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

$mq-show-breakpoints: ();
$mq-responsive:        true;
@import 'mq';


.texto {
    // Apply styling to mobile and upwards
    @include mq($from: mobile) {
        color: red;
    }
    // Apply styling up to devices smaller than tablets (exclude tablets)
    @include mq($until: tablet) {
        color: blue;
    }
    // Same thing, in landscape orientation
    @include mq($until: tablet, $and: '(orientation: landscape)') {
        color: hotpink;
    }
    // Apply styling to tablets up to desktop (exclude desktop)
    @include mq(tablet, desktop) {
        color: green;
    }
}
h1 {
    // Apply styling to mobile and upwards
    @include mq($from: mobile) {
        color: red;
    }
    // Apply styling up to devices smaller than tablets (exclude tablets)
    @include mq($until: tablet) {
        color: blue;
    }
    // Same thing, in landscape orientation
    @include mq($until: tablet, $and: '(orientation: landscape)') {
        color: hotpink;
    }
    // Apply styling to tablets up to desktop (exclude desktop)
    @include mq(tablet, desktop) {
        color: green;
    }
}

SassMeister-output.css

@media (min-width: 20em) {
  .texto {
    color: red;
  }
}

@media (max-width: 46.24em) {
  .texto {
    color: blue;
  }
}

@media (max-width: 46.24em) and (orientation: landscape) {
  .texto {
    color: hotpink;
  }
}

@media (min-width: 46.25em) and (max-width: 61.24em) {
  .texto {
    color: green;
  }
}

@media (min-width: 20em) {
  h1 {
    color: red;
  }
}

@media (max-width: 46.24em) {
  h1 {
    color: blue;
  }
}

@media (max-width: 46.24em) and (orientation: landscape) {
  h1 {
    color: hotpink;
  }
}

@media (min-width: 46.25em) and (max-width: 61.24em) {
  h1 {
    color: green;
  }
}

SassMeister-rendered.html

<h1>LALALALA</h1>
<div class="texto">lalalala</div>