Skip to content
This repository has been archived by the owner on Oct 28, 2021. It is now read-only.

Provides mixins, functions, and variables for working with breakpoints and aids in responsive development in Sass

License

Notifications You must be signed in to change notification settings

roydukkey/sass-module-break

Repository files navigation

Renamed! This package has been renamed to @sass-fairy/break and organised in a mono-repo for better maintainablity, an improved user experience, and full documentation. Explore more about the change at sass-fairy.com.


sass-break

Release Version License

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.

About

Provides mixins, functions, and variables for working with breakpoints and aids in responsive development in Sass

Topics

Resources

License

Stars

Watchers

Forks