@sass-collective/breakpoint

Introduction

Easily manage your CSS breakpoint rules.

Installing

npm install @sass-collective/breakpoint

Usage

@use "@sass-collective/breakpoint";

Screen sizes

You can define the screen sizes variables:

@use "@sass-collective/breakpoint" with (
    $screens: (
        "lg": 1024px
    )
);

Options

Variable	Default	Description
$screens	See Tokens section.	Sets a list of breakpoint tokens.
$clean-sweep	false	Erase the default $screens config for helping you on a fresh start with your own custom tokens.
DEPRECATED $strict	true	Subtract 1px on max-width value, 960px come 959px. Available only with the deprecated styles mixin.

Tokens

Key	Value
xs	360px
sm	480px
md	768px
lg	960px
xl	1200px
2xl	1400px

You can also define new size:

@use "@sass-collective/breakpoint" with (
    $screens: (
        "3xl": 1920px
    )
);

The new token named 3xl is now available like any others.

Declare your own tokens with $clean-sweep

The following Sass...

@use "@sass-collective/breakpoint" with (
    $clean-sweep: true,
    $screens: (
        "tablet": 768px,
        "desktop": 960px
    )
);

...will produce the following tokens...

Key	Value
tablet	768px
desktop	960px

Customization

Sass mixins

Mixin	Description
up($value)	Sets media rule for minimum with only.
down($value)	Sets media rule for maximum with only.
only($value)	Sets media rule for between minimum and maximum widths, but the maximum will be automatically set with next value of $value.
between($min, $max)	Sets media rule for between minimum and maximum widths.
config($screens, $clean-sweep)	Override top-level with configuration.
DEPRECATED styles($min-width, $max-width, $root-selector)	Sets breakpoint rule.

Declare rule with breakpoint.up()

The following Sass...

@use "@sass-collective/breakpoint";

.foo {
    @include breakpoint.up(lg) {
        color: darkcyan;
    }
}

...will produce the following CSS...

@media (min-width: 960px) { 
    .foo {
        color: darkcyan;
    }
}

Declare rule with breakpoint.down()

The following Sass...

@use "@sass-collective/breakpoint";

.foo {
    @include breakpoint.down(lg) {
        color: darkcyan;
    }
}

...will produce the following CSS...

@media (max-width: 960px) {
    .foo {
        color: darkcyan;
    }
}

Declare rule with breakpoint.only()

The following Sass...

@use "@sass-collective/breakpoint";

.foo {
    @include breakpoint.only(lg) {
        color: darkcyan;
    }
}

...will produce the following CSS...

@media (min-width: 960px) and (max-width: 1199px) {
    .foo {
        color: darkcyan;
    }
}

Declare rule with breakpoint.between()

The following Sass...

@use "@sass-collective/breakpoint";

.foo {
    @include breakpoint.between(md, xl) {
        color: darkcyan;
    }
}

...will produce the following CSS...

@media (min-width: 768px) and (max-width: 1199px) {
    .foo {
        color: darkcyan;
    }
}

Declare config with breakpoint.config()

If variables are already configured on top-level, by another dependency for example, you can't use the @use ... with solution anymore, because the module can only be setup once, this is Sass restriction with Module System, but another solution exist for override the main configuration, with a mixin!

See official documentation about override configuration with mixins.

@include breakpoint.config((
    "3xl": 1980px
));

// or

@include breakpoint.config((
    "tablet": 768px,
    "desktop": 960px
), true);

Call breakpoint.config() before the first breakpoint.xxx() mixin call in your project or file.

Sass functions

Function	Description
get-value($token)	Get value from the configured tokens list. Ex. @include breakpoint.get-value(lg); // 960px