SassMeister-input-HTML.html

<h1>I have content<span class="hide-on-mobile"> that is hidden on mobile</span></span></h1>

<ol>
  <li style="color: red;" class="hidden">hidden</li>
  <li style="color: green;" class="desktop-only">desktop-only</li>
  <li style="color: blue;" class="hide-on-desktop">hide-on-desktop</li>
  <li style="color: green;" class="ipad-only">ipad-only</li>
  <li style="color: blue;" class="hide-on-ipad">hide-on-ipad</li>
  <li style="color: green;" class="tablet-only">tablet-only</li>
  <li style="color: blue;" class="hide-on-tablet">hide-on-tablet</li>
  <li style="color: green;" class="mobile-only">mobile-only</li>
  <li style="color: blue;" class="hide-on-mobile">hide-on-mobile</li>
  <!--<li style="color: orange;" class="touch-only">touch-only</li>-->
  <!--<li style="color: orange;" class="hide-on-touch">hide-on-touch</li>-->
</ol>

SassMeister-input.sass

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

// Framework configuration
$prefix: "" !default
$border-classes: true !default
$display-classes: true !default
$spacing-classes: true !default
$positioning-classes: true !default
$visibility-classes: true !default
$alignment-classes: true !default
$grid-classes: true !default

// Layout
$base-width: 320px !default
$small-width: 480px !default
$medium-width: 718px !default
$large-width: 1024px !default
$extra-large-width: 1292px !default


// Display
$display-types: "block", "inline-block", "inline" !default

@each $display-type in $display-types
  %#{$display-type}
    display: #{$display-type}
  @if $display-classes
    .#{$display-type}
      @extend %#{$display-type}

// Visibility
@if $visibility-classes
  .hidden
    display: none !important
    visibility: hidden

  .visually-hidden
    border: 0
    clip: rect(0 0 0 0)
    height: 1px
    margin: -1px
    overflow: hidden
    padding: 0
    position: absolute
    width: 1px

  // conditional content helpers
  // mobile (handhelds)
  .hide-on-mobile
    @media (max-width: $medium-width - 1)
      display: none !important
  .mobile-only
    @media (min-width: $medium-width)
      display: none !important

  // tablets
  .hide-on-tablet,
  .hide-on-ipad
    @media (min-width: $medium-width) and (max-width: $large-width - 1)
      display: none !important
  .tablet-only,
  .ipad-only
    @media (max-width: $medium-width - 1)
      display: none !important
    @media (min-width: $large-width)
      display: none !important

  // desktop
  .hide-on-desktop
    @media (min-width: $large-width)
      display: none !important
  .desktop-only
    @media (max-width: $large-width - 1)
      display: none !important

  // touch
  .hide-on-touch
    .touch &
      display: none !important
  .touch-only
    .no-touch &
      display: none !important

SassMeister-output.css

.block { display: block; }

.inline-block { display: inline-block; }

.inline { display: inline; }

.hidden { display: none !important; visibility: hidden; }

.visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

@media (max-width: 717px) { .hide-on-mobile { display: none !important; } }

@media (min-width: 718px) { .mobile-only { display: none !important; } }

@media (min-width: 718px) and (max-width: 1023px) { .hide-on-tablet, .hide-on-ipad { display: none !important; } }

@media (max-width: 717px) { .tablet-only, .ipad-only { display: none !important; } }
@media (min-width: 1024px) { .tablet-only, .ipad-only { display: none !important; } }

@media (min-width: 1024px) { .hide-on-desktop { display: none !important; } }

@media (max-width: 1023px) { .desktop-only { display: none !important; } }

.touch .hide-on-touch { display: none !important; }

.no-touch .touch-only { display: none !important; }

SassMeister-rendered.html

<h1>I have content<span class="hide-on-mobile"> that is hidden on mobile</span></span></h1>

<ol>
  <li style="color: red;" class="hidden">hidden</li>
  <li style="color: green;" class="desktop-only">desktop-only</li>
  <li style="color: blue;" class="hide-on-desktop">hide-on-desktop</li>
  <li style="color: green;" class="ipad-only">ipad-only</li>
  <li style="color: blue;" class="hide-on-ipad">hide-on-ipad</li>
  <li style="color: green;" class="tablet-only">tablet-only</li>
  <li style="color: blue;" class="hide-on-tablet">hide-on-tablet</li>
  <li style="color: green;" class="mobile-only">mobile-only</li>
  <li style="color: blue;" class="hide-on-mobile">hide-on-mobile</li>
  <!--<li style="color: orange;" class="touch-only">touch-only</li>-->
  <!--<li style="color: orange;" class="hide-on-touch">hide-on-touch</li>-->
</ol>