Breakpoint

Introduction

Sass functions and mixins to use media queries rules.

Installing

npm install @unsass/breakpoint

Usage

@use "@unsass/breakpoint";

.foo {
    @include breakpoint.up("lg") {
        // ...
    }
}

Configuration

@use "@unsass/breakpoint" with (
    $screens: (
        "lg": 1024px
    )
);

Options

Variable	Default	Description
$screens	See Tokens section.	Sets a list of breakpoint tokens.
$reset	false	Erase the default $screens config for helping you on a fresh start with your own custom tokens.

Tokens

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

You can also define new size:

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

The new token named 3xl will be added to the default tokens list.

Top-level config override

If variables are already configured on top-level using @use ... with, by another dependency for example, you can't use this solution anymore, because the module can only be setup once, this is a 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.

Mixin	Description
config($screens, $reset)	Override top-level with configuration.

Declare config with breakpoint.config()

@use "@unsass/breakpoint";

// Extend the default list...
@include breakpoint.config((
    "3xl": 1980px
));

// ... or reset for fresh start...
@include breakpoint.config((
    "tablet": 768px,
    "desktop": 960px
), true);

API

Sass mixins

Mixin	Description
up($token)	Sets media rule for minimum width only.
down($token)	Sets media rule for maximum width only.
only($token)	Sets media rule for between minimum and maximum widths, but the maximum will be automatically set with next value of $token.
between($min, $max)	Sets media rule for between minimum and maximum widths.

Up rule with breakpoint.up()

The following Sass...

@use "@unsass/breakpoint";

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

...will produce the following CSS...

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

Down rule with breakpoint.down()

The following Sass...

@use "@unsass/breakpoint";

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

...will produce the following CSS...

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

Only rule with breakpoint.only()

The following Sass...

@use "@unsass/breakpoint";

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

...will produce the following CSS...

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

Between rule with breakpoint.between()

The following Sass...

@use "@unsass/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;
    }
}

Sass functions

Function	Description
get-value($token)	Get value from the configured tokens list.
get-screens()	Get list of screens tokens.

Get token value with breakpoint.get-value()

The following Sass...

@use "@unsass/breakpoint";

.foo {
    width: breakpoint.get-value("lg");
}

...will produce the following CSS...

.foo {
    width: 960px;
}