JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="test"></div>

SCSS

//--------------------------------------------------------//
// new-breakpoint - Creates media query breakpoint string
// @param  {String} $type  Media type
// @param  {String} $min   Media min-width
// @param  {String} $max   Media max-width
// @param  {String} $min-y Media min-height
// @param  {String} $max-y Media max-height
// @return {String}        Breakpoint string
//--
@function new-breakpoint($type: 'screen', $min: null, $max: null, $min-y: null, $max-y: null){
  
  $breakpoint: $type;
  
  @if ($min != null){ $breakpoint: append($breakpoint, 'and (min-width: ' + $min + ')', space); }
  @if ($max != null){ $breakpoint: append($breakpoint, ' and (max-width: ' + $max + ')', space); }
  @if ($min-y != null){ $breakpoint: append($breakpoint, ' and (min-height: ' + $min-y + ')', space); }
  @if ($max-y != null){ $breakpoint: append($breakpoint, ' and (max-height: ' + $max-y + ')', space); }
  
  @return $breakpoint
  
}

//--------------------------------//
// media - Injects a media query
// @param {String} $media-query Media query string
//--
@mixin media($media-query: new-breakpoint()){
  
  @media #{$media-query}{
    @content;
  }
  
}


//------//
// DEMO //
//------//

//-- Variables --//
$medium-screen: 800px;
$large-screen: 1000px;

//-- Media breakpoints --//
$medium-screen-up: new-breakpoint($min: $medium-screen);
$large-screen-up:  new-breakpoint($min: $large-screen);
$small-screen-only: new-breakpoint($max: ($medium-screen - 1px));
$medium-screen-only: new-breakpoint($min: $medium-screen, $max: $large-screen);

.test{
  font-family: monospace;
  color: #333;
  background-color: #fff;
  
  @include media($small-screen-only){
    color: #c44;
  }
  
  @include media($medium-screen-up){
    background: #eee;
  }
  
  @include media($large-screen-up){
    background: #ccc;
  }
  
  // after
  &:after{
    content: 'Default';
    
    @include media($medium-screen-up){
      content: 'Medium';
    }
    
    @include media($large-screen-up){
     ...

JavaScript

/**
 * @media - SASS mixin
 */