Double Dash Media Queries

Double Dash + PostCSS = the next decade media queries workflow, right now.

Double Dash is a SCSS library helping to declare custom media queries. It includes:

• predefined custom media queries, covering the whole specs;
• mixins that generate ranged media queries (min-width, max-width…).

Contents

• Installation
• Predefined custom media queries
  • Color scheme (prefers-color-scheme)
  • Contrast (prefers-contrast)
  • Display (display-mode)
  • Motion (prefers-reduced-motion)
  • Ratios (aspect-ratio)
  • Connectivity (prefers-reduced-data)
  • Others
• Mixins for ranged media queries
  • Introduction
  • Available mixins
• Partial import
• Debug

Installation

• npm install double-dash.scss pulls the package into your project.
• @import '~double-dash.scss'; near the beginning of the main SCSS file enables Double Dash features.

💡 Awaiting for browsers to embrace Custom Media Queries, some CSS post-processing is needed. Post CSS Preset Env perfectly fills this gap.

Predefined custom media queries

Double Dash provides a set of custom media queries usable in @media rules out of the box.

Colors scheme (prefers-color-scheme)

--dark: the user prefers a dark UI.

--light: the user prefers a light UI or has no colors preference. Aliases: --any-theme, --any-color-scheme, --no-theme-preference, --no-color-scheme-preference.

Contrast (prefers-contrast)

--more-contrast: the user prefers a UI with a higher level of contrast. Aliases: --high-contrast, --contrasted.

--less-contrast: the user prefers a UI with a lower level of contrast. Alias: --low-contrast.

--no-contrast-preference: the user has no contrast preference. Aliases: --any-contrast, --normal-contrast.

Display (display-mode)

These custom media queries matches the Web Manifest display property.

--fullscreen: the website covers the screen, the browser has no chrome (= no user interface).

--standalone: the website is displayed as if it was an app.

--minimal-ui: same as standalone, with some browser UI elements.

--browser: the website is open in a browser tab or window.

Motion (prefers-reduced-motion)

--reduced-motion: the user wants less or no animation. Aliases: --no-motion, --less-motion, --stop.

--no-motion-preference: the user doesn’t want less animation. Aliases: --motion, --full-motion, --play, --animate-all-the-things, --party-parrot.

Example:

*,
*::before,
*::after {
  @media (--reduced-motion) {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
  }
}

Ratios (aspect-ratio)

--landscape: the viewport width is greater than its height. Alias: --horizontal.

--square: the viewport width and height are equal.

--portrait: the viewport width is smaller than its height. Alias: --vertical.

Connectivity (prefers-reduced-data)

--reduced-data: the user prefers to save data. Alias: --data-shortage.

--no-data-preference: the user doesn’t prefer to save data. Alias: --data.

Example:

.hero {
  background-image: url('wedding-pic-2048-1024.webp');

  @media (--reduced-data) {
    background-image: none;
  }
}

Others

Not documented yet. Feel free to have a messy look at the messy sources.

Mixins for ranged media queries

Introduction

Mixins for ranged media queries generate a lot of custom media queries based on breakpoints lists.

// Gather component breakpoints in a SCSS list.
$nav-breakpoints: (
  'nav-collapsed': 45em,
  'nav-expanded': 90em,
);

// One mixin to generate them all.
@include --w($nav-breakpoints);

This unique --w mixin call generates all these width-based custom media queries:

// min-width
--nav-collapsed // (min-width: 45em)
--nav-expanded // (min-width: 90em)

// max-width
--to-nav-collapsed // (max-width: 44.999em)
--to-nav-expanded // (max-width: 89.999em)

// combinations
--nav-collapsed-to-nav-expanded // (min-width: 45em) and (max-width: 89.999em)

They are now all usable in @media:

@media(--nav-expanded) {
  .nav-toggle-btn { display: none; }
}

Available mixins

Width and height

@include --w-from(name, width);
@include --w-to(name, width);
@include --w-is(name, width);
@include --w-from-to(name, smallerWidth, otherName, greaterWidth);
@include --w(widthsList);

@include --h-from(name, height);
@include --h-to(name, height);
@include --h-is(name, height);
@include --h-from-to(name, smallerHeight, otherName, greaterHeight);
@include --h(heightsList);

Width and height mixins documentation.

Resolution

@include --resolution-from(name, pxDensityFactor);
@include --resolution-to(name, pxDensityFactor);
@include --resolution-is(name, pxDensityFactor);
@include --resolution(resolutionsList);

Resolution mixins documentation.

Ratio

Soon.

Partial import

The purpose of partial import is to avoid naming conflicts with existing custom media queries and SCSS mixins.

Import predefined custom media queries

This examples only pulls the prefers-reduced-motion custom media queries:

`@import '~double-dash.scss/src/variables/motion';`

Available files: color, js, light, motion, pointer, ratio, refresh, resolution, ui.

Import mixins for ranged media queries

First, import the generic --media mixins (the other mixins use it):

@import '~double-dash.scss/src/mixins/base';

Then, pulls the mixins for viewport sizes custom media queries:

@import '~double-dash.scss/src/mixins/sizes';

Available files: ratio, resolution, sizes.

Debug

You can output each custom media query generated with Double Dash in your CLI by setting the $dash-dash-debug variable before importing Double Dash.

$dash-dash-debug: true;
@import '~double-dash.scss';