@sass-collective/breakpoint

2.4.1 • Public • Published

Sass Breakpoint

Version Downloads License

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

Dependents (1)

Package Sidebar

Install

npm i @sass-collective/breakpoint

Weekly Downloads

2

Version

2.4.1

License

MIT

Unpacked Size

21.5 kB

Total Files

9

Last publish

Collaborators

  • bdamevin