@sass-collective/breakpoint v2.4.1
Introduction
Easily manage your CSS breakpoint rules.
Installing
npm install @sass-collective/breakpointUsage
@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 |