Sass media query breakpoint systemization library.
MIT License
Break is a library of Sass mixins that ease the creation of systemized media query breakpoints.
For more information see the documentation.
To get started quickly read the Getting Started guide.
$ npm add -D @lkummer/break
$ yarn add --dev @lkummer/break
With the module installed, systemized breakpoints can be defined and media queries can be created with mixins.
@use '@lkummer/break' as break;
$breakpoints: (
'small': (
'upper': 780px
),
'large': (
'lower': 781px
)
);
.element {
// Media query enabled on small screens and under.
@include break.media-under('small', $breakpoints) {
// @content is placed in the media query.
background: blue;
}
}
Yielding the following output once processed.
.element {
@media (max-width: 780px) {
background: blue;
}
}
Read the Getting Started guide.
Before running the development scripts, make sure to download the dependencies.
$ yarn install
Sass functionality is tested using True. More information can be found here.
Tests can be run using the test
script.
$ yarn run test
Linting can be run using the lint
script.
$ yarn run lint
Style enforcement is done using Prettier.
Files can be formatted using the format
script.
$ yarn run format
The doc
script builds the documentation in the dist/doc
directory.
$ yarn run doc