A tool to work with breakpoints and media-queries in Sass and Javascript.
CSS Ruby JavaScript
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
stylesheets
test
.gitignore
LICENSE
README.md
bower.json
package.json
sache.json
shift-sass.gemspec

README.md

Shift-sass

Shift-sass is a tool to work with breakpoints and media-queries in Sass. It tries to be simple and concise, but powerful enough to make working with breakpoints accross your projects easy.

Shift-sass works perfectly with its companion tool Shift-js, which shares a similar API to work with breakpoints in the javascript part of your project. Together, these two tools make it easy to build and configure responsive front-end components.

Installation

Bower

Open the Terminal, cd to your project folder and enter the following command:

bower install shift-sass --save-dev

Add the path to shift-sass's bower component to sass's loadPaths option

sass.render({
    loadPaths: [
        'path/to/bower_components/shift-sass/stylesheets'
        ...
    ],
    ...
});

Import shift-sass files in your project's stylesheets

@import "shift";

Usage

Adding media-query features

@include shift-set( $feature, $label, $value[, $tweakpoint ]);
@include shift-set-width( $label, $value[, $tweakpoint ]);
@include shift-set-height( $label, $value[, $tweakpoint ]);
@include shift-set-resolution( $label, $value[, $tweakpoint ]); // SOON!

Output media-query

@include shift-breakpoint($expression[, $tweakpoint ]);
@include shift($expression[, $tweakpoint ]); /* convenient alias */
/* SOON! */ @include shift-width($widths[, $tweakpoint ]);
/* SOON! */ @include shift-height($heights[, $tweakpoint ]);
/* SOON! */ @include shift-resolution($resolution[, $tweakpoint ]);

Supported syntaxes for expressions

keywords

  • only
  • {CSS_MEDIA_TYPES}

min-width

  • s
  • s_
  • w>s
  • w > s
  • width>s
  • width > s
  • min-width:s
  • min-width: s

max-width

  • _l
  • w<l
  • w < l
  • width<l
  • width < l
  • max-width:l
  • max-width: l

min-height

  • -l_
  • h>l
  • h > l
  • height>l
  • height > l
  • min-height:l
  • min-height: l

max-height

  • -_xl
  • h<xl
  • h < xl
  • height<xl
  • height < xl
  • max-height:xl
  • max-height: xl

resolution

  • 2x
  • 1.5x
  • 31x
Examples
// min-width queries
@include shift('>md') { ... }
@include shift('w>md') { ... }
@include shift('from md') { ... } // SOON!

// max-width queries
@include shift('<lg') { ... }
@include shift('screen <lg') { ... }
@include shift('to lg') { ... } // SOON!

// min-/max-width queries
@include shift('from sm to lg') { ... }
@include shift('>sm and <lg') { ... }
@include shift('>sm <lg') { ... }
@include shift('screen >sm <lg') { ... }

// min-height queries
@include shift('h>sm') { ... }

// max-height queries
@include shift('h<lg') { ... }

// mixed queries
@include shift('>sm h<lg') { .. }
@include shift('w>md h<md') { .. }
@include shift('>sm <md h>md') { .. }
@include shift('w>sm w<md h>md') { .. }
@include shift('print w>sm w<md h>sm') { .. }

Getting media-query feature values

$value: shift-get($feature, $label[, $tweakpoint, $unit ]);
$value: shift-get-width($label[, $tweakpoint, $unit ]);
$value: shift-get-height($label[, $tweakpoint, $unit ]);
$value: shift-get-resolution($label[, $tweakpoint, $unit ]); // SOON!