A node-sass importer for a set of SASS mixins that make your life a little bit easier when it comes to developing responsive styles. It allows creating breakpoints and defining styles for each breakpoint in a simple way.
npm install --save-dev whiteboard-media
You can use this importer in node-sass or any project that depends on node-sass. The only thing you need to do to make this work is add the importer to the options and include the required variables or mixins.
var sass = require('node-sass');
var wbMediaImporter = require('whiteboard-media');
sass.render({
file: './scss/styles.scss',
importer: wbMediaImporter
});
var gulp = require('gulp');
var sass = require('gulp-sass');
var wbMediaImporter = require('whiteboard-media');
gulp.task('sass', function() {
return gulp.src('scss/**/*.scss')
.pipe(sass({
importer: wbMediaImporter
})
.pipe(gulp.dest('./css'));
});
module.exports = function(grunt) {
var wbMediaImporter = require('whiteboard-media');
grunt.initConfig({
sass:{
options: {
importer: wbMediaImporter
},
...
}
});
}
Once the importer is setup, you can import the variables and mixins to start using them in your code.
@import 'wb/media'
Responsive breakpoints are stored in the SASS variable $wb-breakpoints
. By default, the following breakpoints are defined:
$wb-breakpoints: (
xs: null,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px
)
You can add a new breakpoint using wb-add-breakpoint($breakpoint-name, $breakpoint-value)
, for example:
$wb-breakpoints: wb-add-breakpoint(mobile, 640px)
// $wb-breakpoints: (
// xs: null,
// sm: 544px,
// md: 768px,
// lg: 992px,
// xl: 1200px,
// mobile: 640px
// )
In the same manner, you can remove a breakpoint using wb-remove-breakpoint($breakpoint-name)
, for example:
$wb-breakpoints: wb-remove-breakpoint(xl)
// $wb-breakpoints: (
// xs: null,
// sm: 544px,
// md: 768px,
// lg: 992px
// )
A set of useful mixins are provided to help you with developing your responsive styles.
Prints a media query based on given values for minimum and maximum widths.
@include wb-media(320px, 640px) {
body {
background: black
}
}
/*
prints the following:
@media screen and (min-width: 320px) and (max-width: 639px) {
body {
background: black
}
}
*/
To exclude one of the constricts, set its value to null
.
@include wb-media(320px, null) {
body {
background: black
}
}
/*
Prints the following:
@media screen and (min-width: 320px) {
body {
background: black
}
}
*/
---
Prints the provided styles specifically and only for the given breakpoint.
@include wb-media-only(md) {
body {
background: black
}
}
/*
Prints the following:
@media screen and (min-width: 768px) and (max-width: 991px) {
body {
background: black
}
}
*/
---
Prints the provided styles for the given breakpoint and larger breakpoints.
@include wb-media-and-larger(md) {
body {
background: black
}
}
/*
Prints the following:
@media screen and (min-width: 768px) {
body {
background: black
}
}
*/
---
Prints the provided styles for the given breakpoint and smaller breakpoints.
@include wb-media-and-smaller(md) {
body {
background: black
}
}
/*
Prints the following:
@media screen and (max-width: 991px) {
body {
background: black
}
}
*/
---
Prints the provided styles through the given breakpoints.
@include wb-media-through(md, lg) {
body {
background: black
}
}
/*
Prints the following:
@media screen and (min-width: 768px) and (max-width: 1199px) {
body {
background: black
}
}
*/
---
Iterates over the breakpoints stack ($wb-breakpoints) and sets 3 global variables which may be used when writing responsive styles.
The three global variables are:
$wb-breakpoint:
The breakpoint name.
$wb-breakpoint-prefix:
The breakpoint name followed by a dash.
$wb-breakpoint-suffix:
The breakpoint name preceded by a dash.
@include wb-make-responsive {
.text-center#{$wb-breakpoint-suffix} {
text-align: center
}
}
/*
Prints the following:
.text-center-xs {
text-align: center
}
@media screen and (min-width: 544px) {
.text-center-sm {
text-align: center
}
}
@media screen and (min-width: 768px) {
.text-center-md {
text-align: center
}
}
@media screen and (min-width: 992px) {
.text-center-lg {
text-align: center
}
}
@media screen and (min-width: 1200px) {
.text-center-xl {
text-align: center
}
}
*/