react()

A useful scss mixin to manage your media queries with charme 🎩

Table of content:

• Options
• Usage

Install the package via npm:

npm i scss-react

and include it using an @import statement:

@import '~scss-react';

/// @import 'node_modules/scss-slamp/dist/index.scss';
/// [...]

Options

First of all we set up the media queries and features we'll use along all the application.

The library comes with a list of default queries and features:

$defaults_react_breakpoints: (
  "small": (min-width: 320px), 
  "medium": (min-width: 750px),
  "large": (min-width: 1000px),
  "xlarge": (min-width: 1300px),
  "pointer": "(pointer: fine) and (hover: hover)",
  "touch": "(pointer: coarse) and (hover: none)"
);

Using $react_breakpoints variable in your scss stylesheet you can easily extend and override the default values adopting consistent naming convention:

$react_breakpoints: (
  "tablet": "(min-width: 768px) and (max-width: 1024px)",
  "xlarge": (min-width: 1600px),
  "xlarge-retina": "(-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px)"
  /// [ ...other rules ]
);

❗ Combined rules, such as (min-width: 768px) and (max-width: 1024px), must be a a quoted string "(min-width: 768px) and (max-width: 1024px)". If they are not, only the right side of the operator will be considered (max-width: 1024px)

The resulting set of values will be the merge of $defaults and $queries variables:

/*
  "small": (min-width: 320px), 
  "medium": (min-width: 750px),
  "large": (min-width: 1000px),
  "xlarge": (min-width: 1600px), // overrited 
  "pointer": "(pointer: fine) and (hover: hover)",
  "touch": "(pointer: coarse) and (hover: none)",
  "tablet": "(min-width: 768px) and (max-width: 1024px)", // added
  "large-retina": "(-webkit-min-device-pixel-ratio: 2)  and (min-width: 1300px)" // added
*/

Usage

Once we have declared all the queries we need, we can deliver tailored style to each them using the react mixin:

@include react('medium'){
  body{
    background: black;
  }
}
a{
  @include react('pointer'){
    &:hover{
      color: red;
    }
  }
}

/*
  Will generate 

  @media (min-width: 750px)
    body {
      background: black;
    }
  }
  @media (hover: hover)
    a:hover {
      color: red;
    }
  }
*/