@unsass/breakpoint v2.4.0

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

Tokens

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.

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

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

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;
}