sass-break
This Sass module provides mixins, functions, and variables for working with breakpoints and aids in responsive development.
Important: sass-break v1 will continue to provide an API similar to Bootstrap v5.
Install
- Dart Sass:
>=1.33.0
Install the package:
npm install sass-break
Use the package like any other Sass module:
@use 'sass-break';
Depending on your setup, you may need to configure node_modules
as include path:
const sass = require('sass');
sass.render({
file: scss_filename,
includePaths: ['node_modules']
});
Public API
Horizontal Breakpoints
Variables
$horizontal-sizes !default
- A configurable map defining the dimensions at which layout will change, adapting to different screen widths, according to media queries.
$horizontal-names
- A list of sorted horizontal breakpoint names.
$horizontal-values
- A list of sorted horizontal breakpoint values.
Mixins / Functions
Mixins apply a media query rule to the provided content. Functions generate a media query rule for the as a string.
out ( $breakpoint )
- Produces a media query rule for the given horizontal breakpoint and wider.
in ( $breakpoint )
- Produces a media query rule for the given horizontal breakpoint and narrower.
in-between ( $first-breakpoint, $second-breakpoint )
- Produces a media query rule for the given horizontal breakpoints which is equal and wider than the smaller, and equal and narrower than the larger.
in-only ( $breakpoint )
- Produces a media query rule for the given horizontal breakpoint.
Vertical Breakpoints
Variables
$vertical-sizes !default
- A configurable map defining the dimensions at which layout will change, adapting to different screen heights, according to media queries.
$vertical-names
- A list of sorted vertical breakpoint names.
$vertical-values
- A list of sorted vertical breakpoint values.
Mixins / Functions
Mixins apply a media query rule to the provided content. Functions generate a media query rule for the as a string.
up ( $breakpoint )
- Produces a media query rule for the given vertical breakpoint and taller.
down ( $breakpoint )
- Produces a media query rule for the given vertical breakpoint and shorter.
down-between ( $first-breakpoint, $second-breakpoint )
- Produces a media query rule for the given vertical breakpoints which is equal and taller than the smaller, and equal and shorter than the larger.
down-only ( $breakpoint )
- Produces a media query rule for the given vertical breakpoint.
Don't see the function you're looking for? Request a new feature describing a use case.