{"id":24568569,"url":"https://github.com/unsass/breakpoint","last_synced_at":"2025-04-22T16:50:15.651Z","repository":{"id":37970517,"uuid":"464635067","full_name":"unsass/breakpoint","owner":"unsass","description":"Sass functions and mixins to use media queries rules.","archived":false,"fork":false,"pushed_at":"2024-04-24T18:22:11.000Z","size":1268,"stargazers_count":12,"open_issues_count":7,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-24T20:13:38.176Z","etag":null,"topics":["breakpoint","media-queries","sass"],"latest_commit_sha":null,"homepage":"https://mellow-souffle-b0b37e.netlify.app/breakpoint/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unsass.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-28T20:32:27.000Z","updated_at":"2024-06-19T05:15:03.690Z","dependencies_parsed_at":"2023-12-21T18:25:23.169Z","dependency_job_id":"d0111869-0fda-4ac5-bc68-a8c0d23bd5e5","html_url":"https://github.com/unsass/breakpoint","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unsass%2Fbreakpoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unsass%2Fbreakpoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unsass%2Fbreakpoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unsass%2Fbreakpoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unsass","download_url":"https://codeload.github.com/unsass/breakpoint/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250282408,"owners_count":21404965,"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":["breakpoint","media-queries","sass"],"created_at":"2025-01-23T14:40:58.129Z","updated_at":"2025-04-22T16:50:15.630Z","avatar_url":"https://github.com/unsass.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Breakpoint\n\n[![Version](https://flat.badgen.net/npm/v/@unsass/breakpoint)](https://www.npmjs.com/package/@unsass/breakpoint)\n[![Downloads](https://flat.badgen.net/npm/dt/@unsass/breakpoint)](https://www.npmjs.com/package/@unsass/breakpoint)\n[![License](https://flat.badgen.net/npm/license/@unsass/breakpoint)](https://www.npmjs.com/package/@unsass/breakpoint)\n\n## Introduction\n\nSass functions and mixins to use media queries rules.\n\n## Installing\n\n```shell\nnpm install @unsass/breakpoint\n```\n\n## Usage\n\n```scss\n@use \"@unsass/breakpoint\";\n\n.foo {\n    @include breakpoint.up(\"lg\") {\n        // ...\n    }\n}\n```\n\n### Configuration\n\n```scss\n@use \"@unsass/breakpoint\" with (\n    $screens: (\n        \"lg\": 1024px\n    )\n);\n```\n\n### Options\n\n| Variable   | Default               | Description                                                                                       |\n|------------|-----------------------|---------------------------------------------------------------------------------------------------|\n| `$screens` | See `Tokens` section. | Sets a list of breakpoint tokens.                                                                 |\n| `$reset`   | `false`               | Erase the default `$screens` config for helping you on a fresh start with your own custom tokens. |\n\n### Tokens\n\n| Key   | Value    |\n|-------|----------|\n| `xs`  | `360px`  |\n| `sm`  | `480px`  |\n| `md`  | `768px`  |\n| `lg`  | `960px`  |\n| `xl`  | `1200px` |\n| `2xl` | `1400px` |\n\nYou can also define new size:\n\n```scss\n@use \"@unsass/breakpoint\" with (\n    $screens: (\n        \"3xl\": 1920px\n    )\n);\n```\n\nThe new token named `3xl` will be added to the default tokens list.\n\n### Top-level config override\n\nIf variables are already configured on top-level using `@use ... with`, by another dependency for example, you can't use\nthis solution anymore, because the module can only be setup once, this is a Sass restriction with **Module System**, but\nanother solution exist for override the main configuration, with a mixin!\n\nSee [official documentation](https://sass-lang.com/documentation/at-rules/use#with-mixins) about override configuration\nwith mixins.\n\n| Mixin                      | Description                              |\n|----------------------------|:-----------------------------------------|\n| `config($screens, $reset)` | Override top-level `with` configuration. |\n\n#### Declare config with `breakpoint.config()`\n\n```scss\n@use \"@unsass/breakpoint\";\n\n// Extend the default list...\n@include breakpoint.config((\n    \"3xl\": 1980px\n));\n\n// ... or reset for fresh start...\n@include breakpoint.config((\n    \"tablet\": 768px,\n    \"desktop\": 960px\n), true);\n```\n\n## API\n\n### Sass mixins\n\n| Mixin                 | Description                                                                                                                    |\n|-----------------------|--------------------------------------------------------------------------------------------------------------------------------|\n| `up($token)`          | Sets media rule for minimum width only.                                                                                        |\n| `down($token)`        | Sets media rule for maximum width only.                                                                                        |\n| `only($token)`        | Sets media rule for between minimum and maximum widths, but the maximum will be automatically set with next value of `$token`. |\n| `between($min, $max)` | Sets media rule for between minimum and maximum widths.                                                                        |\n\n#### Up rule with `breakpoint.up()`\n\nThe following Sass...\n\n```scss\n@use \"@unsass/breakpoint\";\n\n.foo {\n    @include breakpoint.up(\"lg\") {\n        color: darkcyan;\n    }\n}\n```\n\n...will produce the following CSS...\n\n```css\n@media (min-width: 960px) {\n    .foo {\n        color: darkcyan;\n    }\n}\n```\n\n#### Down rule with `breakpoint.down()`\n\nThe following Sass...\n\n```scss\n@use \"@unsass/breakpoint\";\n\n.foo {\n    @include breakpoint.down(\"lg\") {\n        color: darkcyan;\n    }\n}\n```\n\n...will produce the following CSS...\n\n```css\n@media (max-width: 959px) {\n    .foo {\n        color: darkcyan;\n    }\n}\n```\n\n#### Only rule with `breakpoint.only()`\n\nThe following Sass...\n\n```scss\n@use \"@unsass/breakpoint\";\n\n.foo {\n    @include breakpoint.only(\"lg\") {\n        color: darkcyan;\n    }\n}\n```\n\n...will produce the following CSS...\n\n```css\n@media (min-width: 960px) and (max-width: 1199px) {\n    .foo {\n        color: darkcyan;\n    }\n}\n```\n\n#### Between rule with `breakpoint.between()`\n\nThe following Sass...\n\n```scss\n@use \"@unsass/breakpoint\";\n\n.foo {\n    @include breakpoint.between(\"md\", \"xl\") {\n        color: darkcyan;\n    }\n}\n```\n\n...will produce the following CSS...\n\n```css\n@media (min-width: 768px) and (max-width: 1199px) {\n    .foo {\n        color: darkcyan;\n    }\n}\n```\n\n### Sass functions\n\n| Function            | Description                                |\n|---------------------|--------------------------------------------|\n| `get-value($token)` | Get value from the configured tokens list. |\n| `get-screens()`     | Get list of screens tokens.                |\n\n#### Get token value with `breakpoint.get-value()`\n\nThe following Sass...\n\n```scss\n@use \"@unsass/breakpoint\";\n\n.foo {\n    width: breakpoint.get-value(\"lg\");\n}\n```\n\n...will produce the following CSS...\n\n```css\n.foo {\n    width: 960px;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funsass%2Fbreakpoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funsass%2Fbreakpoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funsass%2Fbreakpoint/lists"}