SASS mixins for named breakpoints.
CSS
Switch branches/tags
Nothing to show
Permalink
Failed to load latest commit information.
example initial commit Aug 20, 2015
.gitignore initial commit Aug 20, 2015
README.md update doco Aug 20, 2015
index.scss deprecate index.scss for mixins.scss Jan 16, 2017
package.json deprecate index.scss for mixins.scss Jan 16, 2017
sache.json initial commit Aug 20, 2015

README.md

sass-breakpoints

SASS mixins for named breakpoints.

  • Named breakpoints improve readability and maintainability
  • Customisable breakpoints allow you to target whatever devices you want
  • Breakpoints are set in em and scale with the user's base font-size

Installation

npm install --save sass-breakpoints

Usage

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

SCSS: example/settings.scss

//these are the default settings if not specified by the user
$breakpoints: (
  "xs": 0px,    //targeting <568px devices (e.g. all iPhones <6)
  "sm": 568px,  //targeting >=568px devices (e.g. iPhones >=6)
  "md": 768px,  //targeting >=768px tablets (e.g. portrait iPad)
  "lg": 1004px  //targeting >=1024px tablets (e.g. landscape iPad) and desktops but leaving room for the scroll bar
);

SCSS: example/example.scss

@import "./settings";
@import "sass-breakpoint";

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

@include breakpoint('md', 'lg') {     //from `md` to `lg - 1px` (>=768px to <1024px)
  body {
    background-color: green;
  }
}

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

CSS: compiled.scss

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

@media (min-width: 48em) and (max-width: 62.6875em) {
  body {
    background-color: green; } }

@media (min-width: 62.75em) {
  body {
    background-color: blue; } }

API

breakpoint($from, $to: null)

@include breakpoint('xs') {           //>=0px
  body { color: red; }
}

@include breakpoint('sm, 'md') {      //>=568px but <768px
  body { color: blue; }
}

breakpoint-lt($to)

@include breakpoint-lt('md') {        //<768px
  body { color: red; }
}

breakpoint-lte($to)

@include breakpoint-lte('md') {       //<=768px
  body { color: red; }
}

breakpoint-gt($from)

@include breakpoint-gt('md') {        //>768px
  body { color: red; }
}

breakpoint-lte($to)

@include breakpoint-gte('md') {       //>=768px
  body { color: red; }
}

breakpoint-between($from, $to)

@include breakpoint-between('sm', 'md') { //>568px but <768px
  body { color: red; }
}

License

The MIT License (MIT)

Copyright (c) 2015 James Newell