@sassi/breakpoints
v1.1.0
Published
Simple @media breakpoints in Sass/SCSS.
Downloads
26
Maintainers
Readme
@sassi/breakpoints
Simple @media breakpoints in Sass/SCSS.
.block {
color: #1771f1;
// Use preset breakpoints
@include breakpoint-up(tablet) {
color: #052555;
}
// or pixels
@include breakpoint-up(400) {
color: #2300b0;
}
// or combination
@include breakpoint-range(mobile, 600px) {
position: relative;
}
}
Also @sassi/breakpoints supports rem
— see configuration for details.
Installation
npm i @sassi/breakpoints --save-dev
There are at least two connection options:
- Import inside .sass or .scss file,
- Using build system (like Gulp).
@import
Note! Do not forget to put down your own path to node_modules
.
@import '../node_modules/@sassi/breakpoints/sassi-breakpoints';
Via Gulp
Create task:
const sass = require('sass');
const breakpoints = require('@sassi/breakpoints');
gulp.task('styles', () => (
gulp.src('src/styles/app.scss')
.pipe(sass({ includePaths: [breakpoints] }))
.pipe(gulp.dest('dest'))
));
And @import anywhere in your Sass/SCSS:
@import 'sassi-breakpoints';
Defaults
If you do not configure breakpoints yourself, default values are applied:
$sassi-bp: (
bp: (
sm: 320,
md: 768,
lg: 1024,
wide: 1200
),
base-font-size: 16,
units: px,
disallow-min-breakpoint: false
);
For more information, see configuration.
Mixins
Almost all mixins can work with both numeric values (pixels) and preset breakpoints.
Note! All numeric values are specified in pixels even if they are translated into rems.
breakpoint-up(measure)
Alias: bp-up(measure)
.
Numeric:
0 200px 400px 600px 800px 1000px
├─────────┼──————————┼——————————┼——————————┼——————————┼——————————>
·
·
·
· breakpoint-up(400)
├───────────────────────────────────────────>
Preset breakpoint:
0 sm md lg wide
├────────┼────────┼────────────────────────────┼────────┼────────>
·
·
·
· breakpoint-up(md)
├──────────────────────────────────────────────>
breakpoint-range(measure)
Alias: bp-range(measure)
.
Numeric:
0 200px 400px 600px 800px 1000px
├─────────┼──————————┼——————————┼——————————┼——————————┼——————————>
· ·
· ·
· ·
· breakpoint-range(400, 1000) ·
├────────────────────────────────┤
Preset breakpoint:
0 sm md lg wide
├────────┼────────┼────────────────────────────┼────────┼────────>
· ·
· ·
· ·
· breakpoint-range(md, lg) ·
├─────────────────────────────────────┤
Note! breakpoint-range(bp)
cannot be used with maximal preset breakpoint as the upper boundary.
breakpoint-only(bp)
Alias: bp-only(bp)
.
Note! This is the only mixin that can only be used with preset breakpoints.
Preset breakpoint:
0 sm md lg wide
├────────┼────────┼────────────────────────────┼────────┼────────>
· ·
· ·
· ·
· breakpoint-only(md) ·
├────────────────────────────┤
Configuration
If you use SCSS syntax you can just override the configuration variable $sassi-bp
.
But if you use Sass syntax, you will have to use the setter-functions.
Sizes and Names
In all mixins above, you can use a preset breakpoint called by name. To overwrite the default configuration, use set-bp()
:
$sassi-bp: set-bp((mobile: 300, tablet: 640, laptop: 1000, widescreen: 1200));
Note #1! The result of all setter-functions must be written to the $sassi-bp
variable.
Note #2! All numeric values are specified in pixels even if they are translated into rems.
Units — rem
and px
By default, @sassi/breakpoints uses pixels, but you can reassign them to rems.
$sassi-bp: set-bp-units(rem);
For example:
$sassi-bp: set-bp-units(rem);
.block {
color: #1771f1;
@include breakpoint-range(md, lg) {
color: #052555;
}
}
Will be compiled to:
.block {
color: #1771f1;
}
/* 768 / 16 (1024 - 0.02) / 16 */
@media screen and (min-width: 48rem) and (max-width: 63.99875rem) {
.block {
color: #052555;
}
}
Important! In the code above max-width is calculated as (1024 - 0.02) / 16
. More about it in the Overlap section.
For numeric measures you must specify mixins' arguments in pixels: breakpoint-up(160) --> (min-width: 1rem)
.
Base font size
Base font size is the number by which rems are calculated.
For example:
$sassi-bp: set-bp-units(rem);
$sassi-bp: set-bp-base-font-size(20);
block {
color: #1771f1;
@include breakpoint-up(200) {
color: #052555;
}
}
Will be compiled to:
.block {
color: #1771f1;
}
/* 200 / 20 */
@media screen and (min-width: 10rem) {
.block {
color: #052555;
}
}
disallow-min-breakpoint
This is false
by default .
disallow-min-breakpoint: true
prevents using breakpoint-up
with minimal preset breakpoint.
$sassi-bp: set-bp-disallow-min-breakpoint(true);
For example (with default configuration):
$sassi-bp: set-bp-disallow-min-breakpoint(true);
.block {
@include breakpoint-up(sm) { // --> Error!
color: #052555;
}
@include breakpoint-up(md) {
color: #1771f1;
}
}
Preferably:
.block {
color: #052555;
@include breakpoint-up(md) {
color: #1771f1;
}
}
Also when using breakpoint-only
and breakpoint-range
, the minimal breakpoint will be replaced by 0.
For example:
.block {
@include breakpoint-only(sm) {
color: #1771f1;
}
}
.another-block {
@include breakpoint-range(sm, md) {
color: #1771f1;
}
}
Will be compiled to:
@media screen and (min-width: 0) and (max-width: 768px) {
.block {
color: #052555;
}
}
@media screen and (min-width: 0) and (max-width: 1024px) {
.another-block {
color: #1771f1;
}
}
Combination of numeric measure and preset breakpoints
For example (from 400px
to lg
):
.block {
@include breakpoint-range(400, lg) {
color: #052555;
}
}
API
get-bp()
The function returns the numerical value of the breakpoint (without 'px').
For example:
.block {
content: get-bp(md);
}
Will be compiled to:
.block {
content: 768;
}
Overlap
@sassi/breakpoints prevents breakpoint slices overlapping with a neighbouring slices by reducing the upper boundary by 0.02 px.
Not OK
/* ___________↓____ */
@media screen and (min-width: 200px) and (max-width: 640px) {
.block {
color: #052555;
}
}
/* ___________↓____ */
@media screen and (min-width: 640px) and (max-width: 920px) {
.block {
color: #1771f1;
}
}
OK
/* ___________↓____ */
@media screen and (min-width: 200px) and (max-width: 639.98px) {
.block {
color: #052555;
}
}
/* ___________↓____ */
@media screen and (min-width: 640px) and (max-width: 920px) {
.block {
color: #1771f1;
}
}