Stylus - Media Queries
stylus-mq is a simple mixin to ease the use of media queries in stylus. A lot of inspiration to this library was gathered from sass-mq.
Installation
With NPM
npm install stylus-mq
Manual installation can be done by downloading mq.styl to your project.
Basic example
stylus-mq
will allow you to write this:
@import 'mq.styl'; $mq-breakpoints = { small: 768px}; .className { background-color: white; $until: 'small') { background-color: red; }}
and generate this:
{}
Options
$mq-breakpoints
Allows you to override the default named breakpoints.
Example:
$mq-breakpoints = { mobile: 768px, tablet: 1024px, desktop: 1280px};
Default settings:
$mq-breakpoints ?= { tiny: 480px, small: 768px, medium: 992px, large: 1200px};
$mq-responsive
Allows you to create a separate stylesheet for older browsers that don't support media queries.
Example:
$mq-responsive = false;
Default settings:
$mq-responsive ?= true;
$mq-static-breakpoint
Breakpoint to be used if $mq-responsive
is set to false.
Example:
$mq-static-breakpoint = 'mobile';
Default settings:
$mq-static-breakpoint ?= 'desktop';
$mq-base-font-size
Base font size to calculate media queries from.
Example:
$mq-base-font-size = 14px;
Default settings:
$mq-base-font-size ?= 16px;
Parameters
mq()
takes up to three optional parameters:
- $from: inclusive
min-width
boundary - $until: exclusive
max-width
boundary - $and: additional custom directives
Breakpoints as JSON data
To enable using the same breakpoint names and widths in both Stylus and JavaScript the breakpoint data can be converted to JSON.
Example:
body { &:after { display: none; content: ); }}
Results:
This can be read and parsed with something like this:
var { return string;}; var { var breakpoints = window ; return JSON;};
Adding custom breakpoints
$mq-breakpoints = 'tvscreen', 1920px); .hide-on-tv { 'tvscreen') { display: none; }}
Testing
Install dependencies.
npm install
Run tests.
npm test