Configuration

This section will help you to right configure the module for your project.

$screens

You can override existing values or add new ones to extend the default sizes list.

override

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

add new size

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

Default tokens

Key	Value	Description
xs	360px	Extra small screen.
sm	480px	Standard mobile screen.
md	768px	mobile on landscape mode or tablet on portrait mode.
lg	960px	Desktop or tablet on landscape mode.
xl	1200px	Large desktop screen.
2xl	1400px	Extra large desktop screen.

$reset

Clears the default $screens configuration to provide a clean slate for defining your own custom tokens.

@use "@unsass/breakpoint" with (
    $reset: true,
    $screens: (
        "tablet": 768px,
        "desktop": 960px
    )
);

config($screens, $reset)

The following Sass will configure new parameters:

@use "@unsass/breakpoint";

@include breakpoint.config((
    "lg": 1024px
));

INFO

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

See official documentation about override configuration with mixins.