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.
With NPM
npm install stylus-mq
Manual installation can be done by downloading mq.styl to your project.
stylus-mq
will allow you to write this:
@import 'mq.styl';
$mq-breakpoints = {
small: 768px
};
.className {
background-color: white;
+mq($until: 'small') {
background-color: red;
}
}
and generate this:
.className {
background-color: white;
}
@media (max-width: 48em) {
.className {
background-color: red;
}
}
$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;
mq()
takes up to three optional parameters:
- $from: inclusive
min-width
boundary - $until: exclusive
max-width
boundary - $and: additional custom directives
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: mq-breakpoints-to-json();
}
}
Results:
body:after {
display: none;
content: '{ "tiny": "30em", "small": "48em", "medium": "62em", "large": "75em" }';
}
This can be read and parsed with something like this:
var removeQuotes = function (string) {
return string.replace(/^['"]+|\s+|\\|(;\s?})+|['"]$/g, '');
};
var getBreakpoints = function () {
var breakpoints = window
.getComputedStyle(document.body, ':after')
.getPropertyValue('content');
return JSON.parse(removeQuotes(breakpoints));
};
$mq-breakpoints = mq-add-breakpoint('tvscreen', 1920px);
.hide-on-tv {
+mq('tvscreen') {
display: none;
}
}
Install dependencies.
npm install
Run tests.
npm test