{"id":20742441,"url":"https://github.com/meduzen/--media.scss","last_synced_at":"2025-04-24T05:11:36.877Z","repository":{"id":45912076,"uuid":"182338157","full_name":"meduzen/--media.scss","owner":"meduzen","description":"Tomorrow’s media queries workflow, since 2019.","archived":false,"fork":false,"pushed_at":"2023-03-14T16:41:15.000Z","size":169,"stargazers_count":12,"open_issues_count":12,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-17T17:41:50.644Z","etag":null,"topics":["colors-scheme","css","css-custom-media-queries","custom-media","sass","scss","scss-mixins"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meduzen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-19T23:45:40.000Z","updated_at":"2025-02-24T08:34:41.000Z","dependencies_parsed_at":"2022-07-18T16:52:48.180Z","dependency_job_id":null,"html_url":"https://github.com/meduzen/--media.scss","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meduzen%2F--media.scss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meduzen%2F--media.scss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meduzen%2F--media.scss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meduzen%2F--media.scss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meduzen","download_url":"https://codeload.github.com/meduzen/--media.scss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250566509,"owners_count":21451232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["colors-scheme","css","css-custom-media-queries","custom-media","sass","scss","scss-mixins"],"created_at":"2024-11-17T07:05:44.498Z","updated_at":"2025-04-24T05:11:36.838Z","avatar_url":"https://github.com/meduzen.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Double Dash Media Queries\n\nDouble Dash + PostCSS = **the next decade media queries workflow, right now**.\n\nDouble Dash is a SCSS library helping to declare [custom media queries](docs/custom-media-queries.md). It includes:\n- predefined custom media queries, covering the whole specs;\n- mixins that generate *ranged* media queries (`min-width`, `max-width`…).\n\n⚠️ **To use `double-dash.scss` in a `node-sass` project, see [v0.8 documentation](https://github.com/meduzen/--media.scss/tree/v0.8.0#contents)**. If you’re not sure about your environment, start with the [installation section](#installation).\n\n## Contents\n\n- [Installation](#installation)\n- [Predefined custom media queries](#predefined-custom-media-queries)\n  - [Color scheme (`prefers-color-scheme`)](#colors-scheme-prefers-color-scheme)\n  - [Connectivity (`prefers-reduced-data`)](#connectivity-prefers-reduced-data)\n  - [Contrast (`prefers-contrast`)](#contrast-prefers-contrast)\n  - [Display (`display-mode`)](#display-display-mode)\n  - [Forced colors (`forced-colors`)](#forced-colors-forced-colors)\n  - [Motion (`prefers-reduced-motion`)](#motion-prefers-reduced-motion)\n  - [Ratio (`aspect-ratio`)](#ratio-aspect-ratio)\n  - [Others](#others)\n- [Mixins for ranged media queries](#mixins-for-ranged-media-queries)\n    - [Introduction](#introduction)\n    - [Available mixins](#available-mixins)\n      - [Width and height](#width-and-height)\n      - [Resolution](#resolution)\n      - [Ratio](#ratio)\n- [Partial import](#partial-import)\n- [Debug](#debug)\n\n## Installation\n\n💡 `double-dash.scss` supports both the old and the new (2020) SASS specification, but the usage of the library varies per spec.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eIf you’re not sure which one your project uses, this might help.\u003c/summary\u003e\n\n- If the project uses `node-sass` **or** if you import SCSS files using `@import`, there’s a high chance you use **the old spec**.\n- If the project uses Dart SASS (`sass`) **and** if you import SCSS files using `@use` or `@forward`, you are using **the new spec**.\n- In the new spec, `@import` is deprecated and variables are not global. This is why `double.dash.scss` usage isn’t the same changes depending on the spec.\n\n\u003c/details\u003e\n\n### Projects using Dart SASS\n\n**Dart SASS support starts at version 1.0.**\n\n- `npm install double-dash.scss` pulls the package into your project;\n- `@use 'double-dash.scss' as mq;` in all projects where you need one of its mixins or variables. `mq` is the recommended [namespace](https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace) for `double-dash.scss`.\n\n### Projects using `node-sass`\n\n**Projects using `node-sass` must stick to version `0.x`**\n\n- `npm install double-dash.scss@0` pulls the package into your project;\n- `@import 'double-dash.scss';` near the beginning of the main SCSS file enables Double Dash features.\n\n### Browser support\n\n💡 Awaiting for browsers to embrace Custom Media Queries, [PostCSS Preset Env](https://preset-env.cssdb.org) is perfect to fill the gap. If you need an example of a small project using both `double-dash.scss` and PostCSS, you can have a look at [Can We](https://github.com/meduzen/canwe) repository.\n\n## Predefined custom media queries\n\nDouble Dash provides a set of custom media queries usable in `@media` rules out of the box.\n\n### Colors scheme ([prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme))\n\n**`--dark`**: the user prefers a dark UI.\n\n**`--light`**: the user prefers a light UI or has no colors preference.\nAliases: `--any-theme`, `--any-color-scheme`, `--no-theme-preference`, `--no-color-scheme-preference`.\n\nExample:\n```scss\nhtml {\n  background: white;\n  color: black;\n\n  @media (--dark) {\n    background: black;\n    color: white;\n  }\n}\n```\n\n### Contrast ([prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast))\n\n**`--more-contrast`**: the user prefers a UI with a higher level of contrast.\nAliases: `--high-contrast`, `--contrasted`.\n\n**`--less-contrast`**: the user prefers a UI with a lower level of contrast.\nAlias: `--low-contrast`.\n\n**`--no-contrast-preference`**: the user has no contrast preference.\nAliases: `--any-contrast`, `--normal-contrast`.\n\n### Connectivity ([prefers-reduced-data](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data))\n\n**`--reduced-data`**: the user prefers to save data.\nAlias: `--data-shortage`.\n\n**`--no-data-preference`**: the user doesn’t prefer to save data.\nAlias: `--data`.\n\nExample:\n```scss\n.hero {\n  background-image: url('wedding-pic-2048-1024.webp');\n\n  @media (--reduced-data) {\n    background-image: none;\n  }\n}\n```\n\n### Display ([display-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode))\n\nThese custom media queries matches the [Web Manifest `display`](https://developer.mozilla.org/en-US/docs/Web/Manifest#display) property.\n\n**`--fullscreen`**: the website covers the screen, the browser has no _chrome_ (= no user interface).\n\n**`--standalone`**: the website is displayed as if it was an app.\n\n**`--minimal-ui`**: same as `standalone`, with some browser UI elements.\n\n**`--browser`**: the website is open in a browser tab or window.\n\n### Forced colors ([`forced-colors`](https://github.com/meduzen/--media.scss/issues/17))\n\n**These two custom media queries are not released, yet.**\n\n**`--forced-colors`**: the available colors are limited to a user-chosen color palette.\n\n**`--no-forced-colors`**: the available colors are not restricted by a user-chosen color palette.\n\n### Motion ([prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion))\n\n**`--reduced-motion`**: the user wants less or no animation.\nAliases: `--no-motion`, `--less-motion`, `--stop`.\n\n**`--no-motion-preference`**: the user doesn’t want less animation.\nAliases: `--motion`, `--full-motion`, `--play`, `--animate-all-the-things`, `--party-parrot`.\n\nExample:\n```scss\n*,\n*::before,\n*::after {\n  @media (--reduced-motion) {\n    transition-duration: 0.001s !important;\n    animation-duration: 0.001s !important;\n  }\n}\n```\n\n### Ratio ([aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio))\n\n**`--landscape`**: the viewport width is greater than its height.\nAlias: `--horizontal`.\n\n**`--square`**: the viewport width and height are equal.\n\n**`--portrait`**: the viewport width is smaller than its height.\nAlias: `--vertical`.\n\n### Others\n\n*Not documented yet. Feel free to have a messy look at the [messy sources](https://github.com/meduzen/--media.scss/tree/master/src/variables).*\n\n## Mixins for ranged media queries\n\n### Introduction\n\nMixins for ranged media queries generate a lot of custom media queries based on breakpoints lists.\n\n```scss\n@use 'double-dash.scss' as mq;\n\n// Gather component breakpoints in a SCSS list.\n$nav-breakpoints: (\n  'nav-collapsed': 45em,\n  'nav-expanded': 90em,\n);\n\n// One mixin to generate them all.\n@include mq.w($nav-breakpoints);\n```\n\nThis unique `w` mixin call generates the following width-based custom media queries:\n```scss\n// min-width\n--nav-collapsed // (min-width: 45em)\n--nav-expanded // (min-width: 90em)\n\n// max-width\n--to-nav-collapsed // (max-width: 44.999em)\n--to-nav-expanded // (max-width: 89.999em)\n\n// combinations\n--nav-collapsed-to-nav-expanded // (min-width: 45em) and (max-width: 89.999em)\n```\n\nThey are now all usable in `@media`:\n\n```css\n@media (--nav-expanded) {\n  .nav-toggle-btn { display: none; }\n}\n```\n\n### Available mixins\n\n#### Width and height\n\n```scss\n@use 'double-dash.scss' as mq;\n\n@include mq.w-from(name, width);\n@include mq.w-to(name, width);\n@include mq.w-is(name, width);\n@include mq.w-from-to(name, smallerWidth, otherName, greaterWidth);\n@include mq.w(widthsList);\n\n@include mq.h-from(name, height);\n@include mq.h-to(name, height);\n@include mq.h-is(name, height);\n@include mq.h-from-to(name, smallerHeight, otherName, greaterHeight);\n@include mq.h(heightsList);\n```\n\n[Width and height mixins documentation](/docs/ranged-sizes-mixins.md).\n\n#### Resolution\n\n```scss\n@use 'double-dash.scss' as mq;\n\n@include mq.resolution-from(name, pxDensityFactor);\n@include mq.resolution-to(name, pxDensityFactor);\n@include mq.resolution-is(name, pxDensityFactor);\n@include mq.resolution(resolutionsList);\n```\n\n[Resolution mixins documentation](/docs/ranged-resolutions-mixins.md).\n\n#### Ratio\n\nSoon.\n\n## Partial import\n\nThe purpose of partial import is to avoid naming conflicts with existing custom media queries and SCSS mixins.\n\n### Import predefined custom media queries\n\nThis examples only pulls the `prefers-reduced-motion` custom media queries:\n\n```scss\n@use 'double-dash.scss/src/variables/motion';\n```\n\nAvailable files: `color`, `js`, `light`, `motion`, `pointer`, `ratio`, `refresh`, `resolution`, `ui`.\n\n### Import mixins for ranged media queries\n\nExample for the resolution mixins:\n\n```scss\n@use 'double-dash.scss/src/mixins/sizes' as mq;\n```\n\nAvailable files: `ratio`, `resolution`, `sizes`.\n\n## Debug\n\nYou can output each custom media query generated with Double Dash in your CLI by setting the `$debug` variable when importing Double Dash.\n\n```scss\n@use 'double-dash.scss' with ($debug: true);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeduzen%2F--media.scss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeduzen%2F--media.scss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeduzen%2F--media.scss/lists"}