Generated by SassMeister.com.

SassMeister-input.scss

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


$transparent : transparent;
$black       : #000000;
$indigo      : #071932;
$white       : #ffffff;
$grey        : #e8ebf1;
$med-grey    : #c2c6cc;
$chart-grey  : #BAC1CC;
$dark-grey   : #9098a3;
$blue-grey   : #576474;
$blue        : #3a9cff;
$dim-blue    : tint($blue, 40%);
$cyan        : #27e9ff;
$purple      : #6a35c8;
$pink        : #ed3685;
$orange      : #fbb918;
$yellow      : #ffe500;
$pale-yellow : #fef1d1;
$breakpoint-s: 568px;
$breakpoint-mobile: 767px;
$breakpoint-desktop: 768px;

$media-query-s: "screen and (max-width: #{$breakpoint-s}), screen and (max-height: 400px)";
$media-query-mobile: "screen and (max-width: #{$breakpoint-mobile})";
$media-query-desktop: "screen and (min-width: #{$breakpoint-desktop})";


// stoplight colors - avoid if you can
$red   : #ee354b;
$green : #00a05a;

@mixin breakpointify($selector) {
  $initial: str-slice($selector, 1, 1);
  $selector-base: str-slice($selector, 2);
  $valid: true;
  @warn "initial:" $initial;

  @if ($initial != '.') {
    @warn '`#{$selector}` is not a class, breakpointify only works on classes. No output will be generated.';
    $valid: false;
  }

  @if ($valid) {
    %#{$selector-base}, #{$selector} {
      @content;
    }

    %#{$selector-base}-small, #{$selector}-small {
      @media #{$media-query-s} {
        @content;
      }
    }

    %#{$selector-base}-mobile, #{$selector}-mobile {
      @media #{$media-query-mobile} {
        @content;
      }
    }

    %#{$selector-base}-desktop, #{$selector}-desktop {
      @media #{$media-query-desktop} {
        @content;
      }
    }
  }
}

@include breakpointify(".transparent")    { color:      $transparent; }

.test {
  @extend %transparent;
}

SassMeister-output.css

.test, .transparent {
  color: transparent;
}

@media screen and (max-width: 568px), screen and (max-height: 400px) {
  .transparent-small {
    color: transparent;
  }
}

@media screen and (max-width: 767px) {
  .transparent-mobile {
    color: transparent;
  }
}

@media screen and (min-width: 768px) {
  .transparent-desktop {
    color: transparent;
  }
}