Skip to content
Manage media-queries in Sass easily.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENCE.md
README.md
bower.json
package.json
sass-queries.png
sass-queries.scss

README.md

SassQueries

SassQueries
Manage media-queries in Sass easily.

Configuration

Put sass-queries.scss file in your project, and include it via your Sass manifest:

@import "helpers/sass-queries";

You can fully configurate SassQueries thanks to a bunch of variables prefixed with $sq-.
SassQueries provides default values for these variable, so you just have to put the one you need in your variables.scss file:

// Set your breakpoints: label / min-width
$sq-breakpoints: (
    mobile:    320px,
    tablet:    768px,
    desktop:   992px,
    wide:      1200px
);
// What is the media type?
$sq-media: "all";
// Enable (or not) a small tag displaying your current breakpoint
$sq-debug: false;
// Use mobile first or not
$sq-mobile-first: true;

Usage

SassQueries comes with a unique mixin: media(), which allows you to target a starting/ending breakpoint, to specify a media type, and even to add custom options.

.selector {
  @include media($from: tablet) {
    // starting breakpoint
  }
  @include media($until: desktop) {
    // ending breakpoint
  }
  @include media($from: desktop, $media: tv) {
    // media type specified
  }
  @include media($until: tablet, $and: "(orientation: landscape)") {
    // additional option
  }
  @include media($from: tablet, $until: desktop) {
    // starting + ending breakpoint
  }
}

Todo

  • Use default values
  • Display debug tooltip
  • Add mobile-first option
  • Sort $sq-breakpoints map depending of $sq-mobile-first
You can’t perform that action at this time.