scss-react

react()

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

Table of content:

• Options
• Usage
• Adopted by E-commerce Platforms, Apps, and Websites

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 throughout the application.

The library comes with a list of default queries and features, ensuring compatibility with the most commonly used media features as defined in the MDN media query specifications.
These include breakpoints for responsive design, orientation detection, color scheme preferences, and input methods such as pointer and hover capabilities.

$defaults_react_breakpoints: (
  // Mobile-first breakpoints (min-width)
  "xxsmall": (min-width: 280px),
  "xsmall":  (min-width: 360px),
  "small":   (min-width: 480px),
  "medium":  (min-width: 768px),
  "large":   (min-width: 1024px),
  // [...] additional breakpoints like "xlarge", "xxlarge", etc.

  // "Less than" breakpoints (max-width)
  "<small":    (max-width: 479px),
  "<medium":   (max-width: 767px),
  "<large":    (max-width: 1023px),
  // [...] additional breakpoints like "<xlarge", "<xxlarge", etc.

  // Orientation
  "portrait":  "(orientation: portrait)",
  "landscape": "(orientation: landscape)",

  // Color Scheme
  "dark":  "(prefers-color-scheme: dark)",
  "light": "(prefers-color-scheme: light)",

  // Pointer & Hover
  "pointer": "(pointer: fine)",
  "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: (
  "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)

❗ If you use @use or @forward, the override of the $react_breakpoints variable must be done directly within the component (or in a subsequently imported file) depending on your SCSS build system. Ensure that the import order allows the default values to be properly overridden.

Usage

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

/*
  Will generate 

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

Adopted by E-commerce Platforms, Apps, and Websites

This library is trusted and used by several high-profile websites and applications, including:

• Zavaluce
• Airdom
• Custom Airdom
• Ale Bikewear
• Pixartprinting Blog (and 20+ localized versions)
• Gopleyers
• Emblema Bike
• La Mia Cantina
• BlueMotion 3D
• Airness App (Google Play)
• Airdom App (App Store)

...and many others.