{"id":13397416,"url":"https://github.com/lolmaus/breakpoint-slicer","last_synced_at":"2025-05-16T17:04:07.023Z","repository":{"id":397299,"uuid":"9290489","full_name":"lolmaus/breakpoint-slicer","owner":"lolmaus","description":"Slice media queries with ease","archived":false,"fork":false,"pushed_at":"2023-01-06T18:41:34.000Z","size":739,"stargazers_count":345,"open_issues_count":13,"forks_count":28,"subscribers_count":16,"default_branch":"gen-3","last_synced_at":"2025-05-12T16:14:50.248Z","etag":null,"topics":["breakpoint","breakpoint-slicer","breakpoints","media-queries","media-query","responsive-design","responsive-web-design","sass","sass-mixins","scss","scss-mixins"],"latest_commit_sha":null,"homepage":"https://lolmaus.github.io/breakpoint-slicer/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lolmaus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-08T07:06:38.000Z","updated_at":"2025-03-15T20:58:40.000Z","dependencies_parsed_at":"2023-01-13T16:21:54.603Z","dependency_job_id":null,"html_url":"https://github.com/lolmaus/breakpoint-slicer","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lolmaus%2Fbreakpoint-slicer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lolmaus%2Fbreakpoint-slicer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lolmaus%2Fbreakpoint-slicer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lolmaus%2Fbreakpoint-slicer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lolmaus","download_url":"https://codeload.github.com/lolmaus/breakpoint-slicer/tar.gz/refs/heads/gen-3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254573589,"owners_count":22093731,"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","breakpoint-slicer","breakpoints","media-queries","media-query","responsive-design","responsive-web-design","sass","sass-mixins","scss","scss-mixins"],"created_at":"2024-07-30T18:01:22.521Z","updated_at":"2025-05-16T17:04:06.994Z","avatar_url":"https://github.com/lolmaus.png","language":"SCSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cimg alt=\"an egg slicer\" src=\"http://i.imgur.com/GmQNEMG.jpg\" align=\"right\"\u003e\n\nBreakpoint Slicer ![npm](https://img.shields.io/npm/v/breakpoint-slicer) ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/lolmaus/breakpoint-slicer/Build%20SassDoc%20documentation%20and%20deploy%20to%20Github%20Pages) \u003c!-- omit in toc --\u003e \n=================\n\n**Slice media queries with ease**\n\nBreakpoint Slicer is a set of Sass mixins that makes working with mediaqueries effortless and fun.\n\n```scss\n@include at(s)          // =\u003e @media (min-width: 400px) and (max-width: 599px)\n@include from(s)        // =\u003e @media (min-width: 400px)\n@include to(s)          // =\u003e @media                        (max-width: 599px)\n@include between(xs, l) // =\u003e @media (min-width: 200px) and (max-width: 799px)\n```\n\nSee below how to customize breakpoints!\n\n- [Status](#status)\n- [Concept](#concept)\n  - [Enter the mixins](#enter-the-mixins)\n  - [Edge cases](#edge-cases)\n- [Installation](#installation)\n  - [npm](#npm)\n  - [Yarn](#yarn)\n- [Usage with default slices](#usage-with-default-slices)\n  - [With Sass modules and @use, recommended](#with-sass-modules-and-use-recommended)\n  - [With @import](#with-import)\n- [Usage with custom slices](#usage-with-custom-slices)\n  - [Basics](#basics)\n  - [With Sass modules and @use, recommended](#with-sass-modules-and-use-recommended-1)\n  - [With @import](#with-import-1)\n- [Prepending media queries with custom media types or features](#prepending-media-queries-with-custom-media-types-or-features)\n  - [Providing one media/feature group](#providing-one-mediafeature-group)\n  - [Providing multiple media/feature groups](#providing-multiple-mediafeature-groups)\n- [Credit](#credit)\n- [License](#license)\n\n\n\nStatus\n------\n\nBreakpoint Slicer v.3 is a complete rewrite.\n\nBreakpoint Slicer had been evolving, improving its ergonomics while maintaining compatibility with old versions and supporting now obsolete practices. As a result, it ended up being a bit messy.\n\nIt's time to shed the legacy and redesign Breakpoint Slicer with simplicity and leveraging new Sass features such as modules and maps.\n\nSee [CHANGELOG.md](https://github.com/lolmaus/breakpoint-slicer/blob/gen-3/CHANGELOG.md) for the list of breaking changes (there are many! 🙈).\n\n\n\nConcept \n------- \n\nMost media query heleprs operate with breakpoints. Here they are on a scale:\n\n     Breakpoint:   0       200px     400px     600px     800px     1000px    1200px    1400px       \n                   ├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────\u003e\n\nBreakpoint Slicer operates with *slices* instead of breakpoints. A *slice* is a range of viewport sizes between two consequetive breakpoints.\n\n     Breakpoint:   0       200px     400px     600px     800px     1000px    1200px    1400px       \n                   ├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────\u003e\n     Slice:            xxs        xs        s         m         l         xl       xxl       xxxl   \n\nSlices make it much easier to reason about media queries. Take any viewport width, and you can say which slice it corresponds to.\n\nGiven the slices defined above, screen width of `1024px` falls into the `xl` slice, and screen width of `1920px` falls into the `xxxl` slice.\n     \nThe goal of Breakpoint Slicer is to let you quickly apply media queries using slice names instead of px breakpoints.\n\n\n\n### Enter the mixins\n\nBreakpoint Slicer offers four handy mixins that let you set breakpoint ranges easily: `at`, `from`, `to` and `between`:\n\nStyles under `at(m)`        are applied when browser window width is inside the `m` slice.\n\nStyles under `from(m)`      are applied when browser window width is inside the `m` slice or larger.\n\nStyles under `to(m)`        are applied when browser window width is inside the `m` slice or smaller.\n\nStyles under `between(s, l)` are applied when browser window width is inside the `s` slice, `l` slice (inclusive) and any slices in between, if any.\n\n     Breakpoint:   0       200px     400px     600px     800px     1000px    1200px    1400px       \n                   ├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────\u003e\n     Slice:        ·   xxs        xs   ·    s    ·    m    ·    l    ·    xl       xxl       xxxl   \n                   ·                   ·         ·         ·         ·                              \n                   ·                   ·         ·  at(m)  ·         ·                              \n                   ·                   ·         ├────────┤·         ·                              \n                   ·                   ·         ·         ·         ·                              \n                   ·                   ·         · from(m) ·         ·                              \n                   ·                   ·         ├─────────────────────────────────────────────────\u003e\n                   ·                   ·                   ·         ·                              \n                   ·                   ·            to(m)  ·         ·                              \n                   ├──────────────────────────────────────┤·         ·                              \n                                       ·                             ·                              \n                                       ·         between(s, l)       ·                              \n                                       ├────────────────────────────┤·                              \n\n\nMixin incovation   | Resulting media query\n------------------ | ------------------------------------------\nat(m)              | (min-width: 600px) and (max-width: 799px)\nfrom(m)            | (min-width: 600px)\nto(m)              | (max-width: 799px)\nbetween(s, l)      | (min-width: 400px) and (max-width: 999px)\n\nNote that each slice includes its left breakpoint but does not include its right breakpoint.\n\n\n### Edge cases\n\nNote that the last slice does not have a right edge. When it is invoked, the media query will have no max-width value.\n\nSome mixin invocations are **synonomous**:\n\n     Breakpoint:   0       200px     400px     600px     800px     1000px    1200px    1400px       \n                   ├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────\u003e\n     Slice:        ·   xxs   ·    xs        s         m    ·    l         xl       xxl   ·   xxxl   \n                   ·         ·                             ·                             ·          \n                   · at(xxs) ·                             ·                             ·  at(xxxl)\n                   ├────────┤·                             ·                             ├─────────\u003e\n                   ·         ·                             ·                             ·          \n                   · to(xxs) ·                             ·                             · from(xxxl)\n                   ├────────┤·                             ·                             ├─────────\u003e\n                   ·                                       ·                                        \n                   ·                               to(m)   ·   from(l)                              \n                   ├──────────────────────────────────────┤├───────────────────────────────────────\u003e\n                   ·                                       ·                                        \n                   ·           between(xxs, m)             ·           between(l, xxxl)             \n                   ├──────────────────────────────────────┤├───────────────────────────────────────\u003e\n\n…and some become meaningless and **will produce an error**, preventing you from accidentally covering all viewports with a useless media query:\n\n     Breakpoint:   0       200px     400px     600px     800px     1000px    1200px    1400px       \n                   ├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────┼─────────\u003e\n     Slice:        ·   xxs        xs        s         m         l         xl       xxl       xxxl   \n                   ·                                                                                \n                   ·  from(xxs)                                                                     \n                   ├───────────────────────────────────────────────────────────────────────────────\u003e\n                   ·                                                                                \n                   ·                                                                      to(xxxl)  \n                   ├───────────────────────────────────────────────────────────────────────────────\u003e\n\n\n\nInstallation\n------------\n\n### npm\n\n    npm install -D breakpoint-slicer\n\n### Yarn\n\n    yarn add -D breakpoint-slicer\n\n\n\nUsage with default slices\n-------------------------\n\n### With Sass modules and @use, recommended\n\n```scss\n@use \"node_modules/breakpoint-slicer\" as bs;\n\n.foo {\n  @include bp.at(s) {\n    color: red;\n  }\n}\n```\n\n### With @import\n\nUse this only if your Sass version does not support [Sass modules](https://sass-lang.com/blog/the-module-system-is-launched).\n\nImport `breakpoint-slicer` early in your stylesheet:\n\n```scss\n@import 'breakpoint-slicer';\n```\n\nThis will expose mixins into the global scope:\n\n```scss\n.foo {\n  @include at(s) {\n    color: red;\n  }\n}\n```\n\n\n\nUsage with custom slices\n-------------------------\n\nBreakpoint Slicer lets you define your own set of slices.\n\n\n### Basics\n\nSlices are defined as a map like this:\n\n```scss\n$slices: (\n  small: 0px,\n  medium: 400px,\n  large: 800px,\n);\n```\n\nKeys are slice names and values are left breakpoints of each slice.\n\n⚠ One slice *must* have a left breakpoint of `0px`.\n\nIt is recommended that you list slices in the incremental order.\n\nYou can pass a slices map to any of the mixins, ad-hoc style:\n\n```\n.foo {\n  @include bp.at(small, $slices: $slices) {\n    color: red;\n  }\n}\n```\n\nThis approach is only useful if you have to deal with more than one set of slices per Sass module/partial.\n\n\n\n### With Sass modules and @use, recommended\n\nThis is how you can override default slices at the top of your Sass module:\n\n```scss\n// config.scss\n\n$slices: (\n  small: 0px,\n  medium: 400px,\n  large: 800px,\n);\n```\n\n```scss\n// my-module.scss\n\n@use \"config\";\n@use \"node_modules/breakpoint-slicer\" as bs with ($slices: config.$slices);\n\n.foo {\n  @include bp.at(small) {\n    color: red;\n  }\n}\n```\n\n\n### With @import\n\n⚠ Use this only if your Sass version does not support [Sass modules](https://sass-lang.com/blog/the-module-system-is-launched).\n\nDefine `$slices` globally next to your  `breakpoint-slicer` invocation:\n\n```scss\n@import 'breakpoint-slicer';\n\n$slices: (\n  small: 0px,\n  medium: 400px,\n  large: 800px,\n);\n```\n```\n\nThis will make mixins use your slices definition globally, unless overridded with an argumetn:\n\n```scss\n.foo {\n  @include at(medium) {\n    color: red;\n  }\n}\n\n.bar {\n  @include at(tablet-landscape, $slices: $other-slices) {\n    color: blue;\n  }\n}\n```\n\n\n\nPrepending media queries with custom media types or features\n------------------------------------------------------------\n\nUse the `$media` variable in the same manner as you use `$slices`, as explained above.\n\n💡 Here only the ad-hoc variant is demonstrated, but `@use` and global invocations are also possible.\n\n\n\n### Providing one media/feature group\n\nIf you need something simple like `screen`, you can do `$media: screen`.\n\nIf you need to use spaces, then wrap it in parens like this: `$media: (screen and (orientation: portrait))`.\n\n```scss\n.foo {\n  @include at(s, $media: (screen and (orientation: portrait))) {\n    color: red;\n  }\n}\n```\n\nproduces:\n\n```css\n@media screen and (orientation: portrait)) and (min-width: 400px) and (max-width: 599px) {\n  .foo {\n    color: red;\n  }\n}\n```\n\n\n\n### Providing multiple media/feature groups\n\nYou can pass media types/features split with commas, e. g `$media: (screen, print)`:\n\n```scss\n.foo {\n  @include at(s, $media: (screen, print)) {\n    color: red;\n  }\n}\n```\n\nThe generated media query will be duplicated for each type/feature in the list:\n\n```css\n@media screen and (min-width: 400px) and (max-width: 599px), print and (min-width: 400px) and (max-width: 599px) {\n  .foo {\n    color: red;\n  }\n}\n```\n\n\n\nCredit\n------\n\nBuilt by Andrey Mikhaylov ([@lolmaus](https://github.com/lolmaus/)) and [contributors](https://github.com/lolmaus/breakpoint-slicer/graphs/contributors).\n\n\n\nLicense\n-------\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flolmaus%2Fbreakpoint-slicer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flolmaus%2Fbreakpoint-slicer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flolmaus%2Fbreakpoint-slicer/lists"}