@nib-styles/sass-breakpoints

SASS mixins for named breakpoints.

Installation

npm install --save @nib-styles/sass-breakpoints

Usage

sass-composer example/example.scss -o compiled.css

SCSS: example/example.scss

@import "@nib-styles/sass-breakpoints";

@include breakpoint('sm') {           //from `sm` (>=0px)
  body { background-color: red; }
}

@include breakpoint('lg') {           //from `lg` (>=800px)
  body { background-color: green; }
}

CSS: compiled.css

@media (min-width: 30em) {
  body {
    background-color: red; } }

@media (min-width: 50em) {
  body {
    background-color: green; } }

See sass-breakpoints for a full list of the available mixins.

Breakpoints

Name	Resolution
xs	>=0px
sm	>=480px
md	>=640px
lg	>=800px
xl	>=960px