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.
$clean-sweep
Declare your own tokens with 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. |
breakpoint.up()
Declare rule with 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;
}
}
breakpoint.down()
Declare rule with 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;
}
}
breakpoint.only()
Declare rule with 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;
}
}
breakpoint.between()
Declare rule with 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;
}
}
breakpoint.config()
Declare config with 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
|