Generated by SassMeister.com.

SassMeister-input-HTML.html

<table>
  <thead>
    <tr>
      <th></th>
      <th class="mobile">Mobile</th>
      <th class="tablet">Tablet</th>
      <th class="desktop">Desktop</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>is visible</td>
      <td><span class="is-visible-only-mobile">X</span></td>
      <td><span class="is-visible-only-tablet">X</span></td>
      <td><span class="is-visible-only-desktop">X</span></td>
      <tr>
        <td>is hidden</td>
        <td><span class="is-hidden-only-mobile">X</span></td>
        <td><span class="is-hidden-only-tablet">X</span></td>
        <td><span class="is-hidden-only-desktop">X</span></td>
      </tr>
    </tr>
  </tbody>
</table>

<div class="is-hidden-tablet">tablet</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@function debug($list, $pre: false, $level: 1) {
    $tab    : "    ";
    $indent : "";
    $break  : if($pre, "\A ", "");
  
    @if length($list) == 0 {
        @return "( )";
    }
  
    @if length($list) == 1 {
        @return if($pre,  "(" + type-of($list) + ") ", "") + $list;
    }

    @for $i from 1 to $level {
        $indent : $indent + $tab;
    }

    $result: "[" + $break;

    @for $i from 1 through length($list) {
        $item: nth($list, $i);
        $result: $result + if($pre, $indent + $tab, " ");

        @if length($item) > 1 {
            $result: $result 
                + if($pre, "(list: " + length($item) + ") ", "") 
                + debug($item, $pre, $level + 1);
        }

        @else {
            @if $pre {
                $result: $result + "(" + type-of($item) + ") ";
            }
      
            @if length($item) == 0 {
                $result: $result + "( )";
            }
      
            @else if type-of($item) == string {
                $result: $result + quote($item);
            }
      
            @else if $item == null {
                $result: $result + "null";
            }
      
            @else {
                $result: $result + $item;
            }
        }
    
        @if $i != length($list) {
            $result: $result + "," + $break;
        }
    }

    $result: $result + $break + if($pre, if($level > 1, $indent, ""), " ") + "]";

    @return quote($result);
}

/*
  usage:

  @include breakpoint(mobile) {
    margin: 20px;
  }
*/

$breakpoints: (
  "mobile-portrait"     : "only screen and (max-width:400px)",
  "mobile"              : "only screen and (max-width:740px)",
  "not-mobile"          : "only screen and (min-width:741px)",
  "only-mobile"         : "only screen and (max-width:740px)",
  "tablet-portrait"     : "only screen and (max-width:850px)",
  "tablet"              : "only screen and (max-width:1050px)",
  "only-tablet"         : "only screen and (min-width:741px) and (max-width:1051px)",
  "not-tablet"          : "only screen and (min-width:1051px)",
  "desktop"             : "only screen and (min-width:1051px)",
  "only-desktop"        : "only screen and (min-width:1051px)",
  "retina"              : "only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)",
  "highres"             : "print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)",
  "print"               : "print"
) !default;

// adapted snipped form Hugo Giraudel: http://www.sitepoint.com/cross-media-query-extend-sass/
@mixin breakpoint($breakpoint) {
  // Get the width from the keyword `$breakpoint`
  // Or `null` if the keyword doesn't exist in `$breakpoints` map
  $value: map-get($breakpoints, $breakpoint);

  // If `$breakpoint` exists as a key in `$breakpoints`
  @if $value != null {
    // Open a media query block
    @media #{$value} {
      // Let the user dump content
      @content;
    }
  }
  // If `$breakpoint` doesn't exist in `$breakpoints`,
  // Warn the user and do nothing
  @else {
    @warn "Invalid breakpoint `#{$breakpoint}`.";
  }
}

// creates a json out of `$breakpoints`
$mediaJSON: '{';
@each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $value: nth($breakpoint, 2);
    $mediaJSON: $mediaJSON + '"#{$name}":"#{$value}",' !global;
}
$mediaJSON: str-slice( $mediaJSON, 1, str-length($mediaJSON) - 1);
$mediaJSON: $mediaJSON + '}';

// an element with this class will be created with JS in order to parse the JSON content
.js-breakpoint {
  content: "#{$mediaJSON}";
}

///// asdasdadfuckfoobar


@function getList($position, $list) {

  $newList: ();
  @each $item in $list {
    @if $item != $position {
      $newList: append($newList, $item, "comma");
    }
  }

  @return $newList;

}

@mixin responsive-visibility ($visibility-breakpoints, $overwrite: true){

  @each $breakpoint-active in $visibility-breakpoints {
    @include breakpoint($breakpoint-active) {
      $visibles: "";
      $invisibles: "";

      $visibles: unquote($visibles + ".is-visible-#{$breakpoint-active},");
      $invisibles: unquote($invisibles + ".is-hidden-#{$breakpoint-active},");
      
      @if $overwrite == true {
        $others: getList($breakpoint-active, $visibility-breakpoints);
        $othersRule: "";
        @each $other in $others {
          $invisibles: unquote($invisibles + ".is-visible-#{$other},");
        }
      }

      #{$visibles} {
        display: block !important;
        visibility: visible;
        &--inline {
          display: inline !important;
        }
        &--inline-block {
          display: inline-block !important;
        }
      }
      #{$invisibles} {
        display: none !important;
        visibility: hidden;
      }
    }
  }

}
/* exact */
@include responsive-visibility("only-mobile" "only-tablet" "only-desktop", true);

/* up */
@include responsive-visibility("mobile" "tablet" "desktop", false);


@include breakpoint(only-mobile) {
  .mobile {
    background: lime;
  }
}

@include breakpoint(only-tablet) {
  .tablet {
    background: lime;
  }
}

@include breakpoint(only-desktop) {
  .desktop {
    background: lime;
  }
}

SassMeister-output.css

/*
  usage:

  @include breakpoint(mobile) {
    margin: 20px;
  }
*/
.js-breakpoint {
  content: '{"mobile-portrait":"only screen and (max-width:400px)","mobile":"only screen and (max-width:740px)","not-mobile":"only screen and (min-width:741px)","only-mobile":"only screen and (max-width:740px)","tablet-portrait":"only screen and (max-width:850px)","tablet":"only screen and (max-width:1050px)","only-tablet":"only screen and (min-width:741px) and (max-width:1051px)","not-tablet":"only screen and (min-width:1051px)","desktop":"only screen and (min-width:1051px)","only-desktop":"only screen and (min-width:1051px)","retina":"only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)","highres":"print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)","print":"print"}';
}

/* exact */
@media only screen and (max-width: 740px) {
  .is-visible-only-mobile {
    display: block !important;
    visibility: visible;
  }
  .is-visible-only-mobile--inline {
    display: inline !important;
  }
  .is-visible-only-mobile--inline-block {
    display: inline-block !important;
  }

  .is-hidden-only-mobile, .is-visible-only-tablet, .is-visible-only-desktop {
    display: none !important;
    visibility: hidden;
  }
}
@media only screen and (min-width: 741px) and (max-width: 1051px) {
  .is-visible-only-tablet {
    display: block !important;
    visibility: visible;
  }
  .is-visible-only-tablet--inline {
    display: inline !important;
  }
  .is-visible-only-tablet--inline-block {
    display: inline-block !important;
  }

  .is-hidden-only-tablet, .is-visible-only-mobile, .is-visible-only-desktop {
    display: none !important;
    visibility: hidden;
  }
}
@media only screen and (min-width: 1051px) {
  .is-visible-only-desktop {
    display: block !important;
    visibility: visible;
  }
  .is-visible-only-desktop--inline {
    display: inline !important;
  }
  .is-visible-only-desktop--inline-block {
    display: inline-block !important;
  }

  .is-hidden-only-desktop, .is-visible-only-mobile, .is-visible-only-tablet {
    display: none !important;
    visibility: hidden;
  }
}
/* up */
@media only screen and (max-width: 740px) {
  .is-visible-mobile {
    display: block !important;
    visibility: visible;
  }
  .is-visible-mobile--inline {
    display: inline !important;
  }
  .is-visible-mobile--inline-block {
    display: inline-block !important;
  }

  .is-hidden-mobile {
    display: none !important;
    visibility: hidden;
  }
}
@media only screen and (max-width: 1050px) {
  .is-visible-tablet {
    display: block !important;
    visibility: visible;
  }
  .is-visible-tablet--inline {
    display: inline !important;
  }
  .is-visible-tablet--inline-block {
    display: inline-block !important;
  }

  .is-hidden-tablet {
    display: none !important;
    visibility: hidden;
  }
}
@media only screen and (min-width: 1051px) {
  .is-visible-desktop {
    display: block !important;
    visibility: visible;
  }
  .is-visible-desktop--inline {
    display: inline !important;
  }
  .is-visible-desktop--inline-block {
    display: inline-block !important;
  }

  .is-hidden-desktop {
    display: none !important;
    visibility: hidden;
  }
}
@media only screen and (max-width: 740px) {
  .mobile {
    background: lime;
  }
}
@media only screen and (min-width: 741px) and (max-width: 1051px) {
  .tablet {
    background: lime;
  }
}
@media only screen and (min-width: 1051px) {
  .desktop {
    background: lime;
  }
}

SassMeister-rendered.html

<table>
  <thead>
    <tr>
      <th></th>
      <th class="mobile">Mobile</th>
      <th class="tablet">Tablet</th>
      <th class="desktop">Desktop</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>is visible</td>
      <td><span class="is-visible-only-mobile">X</span></td>
      <td><span class="is-visible-only-tablet">X</span></td>
      <td><span class="is-visible-only-desktop">X</span></td>
      <tr>
        <td>is hidden</td>
        <td><span class="is-hidden-only-mobile">X</span></td>
        <td><span class="is-hidden-only-tablet">X</span></td>
        <td><span class="is-hidden-only-desktop">X</span></td>
      </tr>
    </tr>
  </tbody>
</table>

<div class="is-hidden-tablet">tablet</div>