Skip to content

Latest commit

 

History

History
111 lines (83 loc) · 3.19 KB

DOCS.md

File metadata and controls

111 lines (83 loc) · 3.19 KB
Raw

JigSass Tools Mq

NPM version Build Status Dependency Status

Easy peasy media queries. Based on Kaelig's Sass-mq, with a few minor adjustments for JigSass

Installation

Using npm (supports eyeglass):

npm i -S jigsass-tools-mq

Or download

Usage

scss/index.scss is JigSass Tools Mq's importable file.

@import 'path/to/jigsass-tools-mq/scss/index.scss'; should give you all you need.

Overriding defaults

Override default named breakpoints with your own by defining the jigsass-breakpoints variable before jigsass-mq is imported:

Breakpoint names and values can and should be redefined to fit a project design and the language used be the team working on it. However, please keep in mind that the JigSass framework depends on a 0-sized length breakpoint being defined, as it is internally used to set up default values in several places.

// The `jigsass-mq` mixin will try and resolve values from 
// the `lengths` sub-map when evaluating the `$from` and 
// `$until` arguments. When evaluating the `$misc` argument, 
// it will try and resolve values from the `features` sub-map.
$jigsass-breakpoints: (
  lengths: (
    default: 0,
    tiny: 320px,
    small: 480px,
    meduim: 600px,
    large: 1024px,
    x-large: 1280px,
  ),

  features: (
    landscape: '(orientation: landscape)',
    partrait: '(orientation: portrait)',
    hidpi: '(-webkit-min-device-pixel-ratio: 1.3),
            (min-resolution: 120dpi),
            (min-resolution: 1.3dppx)',
  ),
);

@import 'path/to/jigsass-tools-mq/scss/index.scss';

Basic usage

The jigsass-mq mixin takes optional arguments to generate min-width, max-width, media-type and miscellaneous media queries:

$from: min-width $until: max-width (exclusive, value of named breakpoint - 1) $misc: miscellaneous features, can take a list of multiple features. $media-type: A media type, i.e print, handheld, screen, etc.

.responsive {
color: red;
  @include jigsass-mq($from: small, $misc: landscape '(min-color: 8)') {
    color: pink
  }
}

Will compile to:

.responsive {
  color: red;
}

@media (min-width: 30em) and (orientation: landscape) and (min-color: 8) {
  .responsive {
    color: pink;
  }
}

The jigsass-mq mixin stores the currently active min-width breakpoint in the $jigsass-mq-active-breakpoint variable, which is available to the @content during the execution of of the mixin.

When not in the context of a media query, $jigsass-mq-active-breakpoint is set to the zero-width length breakpoint.

License: MIT