sass-mq
Advanced tools
Comparing version 3.2.2 to 3.2.3
{ | ||
"name": "sass-mq", | ||
"description": "mq() is a Sass mixin that helps manipulating media queries in an elegant way.", | ||
"version": "3.2.2", | ||
"version": "3.2.3", | ||
"main": "eyeglass-exports.js", | ||
@@ -46,13 +46,8 @@ "keywords": [ | ||
], | ||
"licenses": [ | ||
{ | ||
"name": "MIT", | ||
"url": "http://opensource.org/licenses/MIT" | ||
} | ||
], | ||
"license": "MIT", | ||
"homepage": "http://sass-mq.github.io/sass-mq/", | ||
"devDependencies": { | ||
"eyeglass": "^0.2.0", | ||
"eyeglass": "^0.5.0", | ||
"node-sass": "^3.2.0" | ||
} | ||
} |
@@ -1,9 +0,10 @@ | ||
# Media Queries with superpowers [![Build Status](https://travis-ci.org/sass-mq/sass-mq.svg?branch=master)](https://travis-ci.org/sass-mq/sass-mq) | ||
# Media Queries with superpowers [![Build Status](https://api.travis-ci.org/sass-mq/sass-mq.svg?branch=master)](https://travis-ci.org/sass-mq/sass-mq) | ||
![ ](https://avatars3.githubusercontent.com/u/9341289?v=3&s=300) | ||
_`mq()` is a [Sass](http://sass-lang.com/ "Sass - Syntactically Awesome | ||
---- | ||
`mq()` is a [Sass](http://sass-lang.com/ "Sass - Syntactically Awesome | ||
Stylesheets") mixin that helps you compose media queries in an elegant | ||
way. It was developed in-house at [the Guardian](http://www.theguardian.com/uk?view=mobile), | ||
and is now also in use at BBC Sport and the Financial Times…_ | ||
way. | ||
@@ -13,4 +14,46 @@ - compiles keywords and `px`/`em` values to `em`-based queries ([a good thing](http://css-tricks.com/zooming-squishes)) | ||
## How to Use It | ||
Here is a very basic example: | ||
```scss | ||
$mq-breakpoints: ( | ||
mobile: 320px, | ||
tablet: 740px, | ||
desktop: 980px, | ||
wide: 1300px | ||
); | ||
@import 'mq'; | ||
.foo { | ||
@include mq($from: mobile, $until: tablet) { | ||
background: red; | ||
} | ||
@include mq($from: tablet) { | ||
background: green; | ||
} | ||
} | ||
``` | ||
Compiles to: | ||
```css | ||
@media (min-width: 20em) and (max-width: 46.24em) { | ||
.foo { | ||
background: red; | ||
} | ||
} | ||
@media (min-width: 46.25em) { | ||
.foo { | ||
background: green; | ||
} | ||
} | ||
``` | ||
_Sass MQ was crafted in-house at the Guardian. Today, many more companies and developers are using it in their projects: [see who uses Sass MQ](#who-uses-sass-mq)._ | ||
---- | ||
## How to use it | ||
Immediately play with it on [SassMeister](http://sassmeister.com/): `@import 'mq';`. | ||
@@ -20,3 +63,3 @@ | ||
1. Install with [Bower](http://bower.io/ "BOWER: A package manager for the web"): `bower install sass-mq --save` | ||
1. Install with [Bower](http://bower.io/ "Bower: A package manager for the web"): `bower install sass-mq --save` | ||
@@ -193,3 +236,3 @@ OR Install with [npm](https://www.npmjs.com/): `npm install sass-mq --save` _it supports [eyeglass](https://github.com/sass-eyeglass/eyeglass)_ | ||
## Test | ||
## Running tests | ||
@@ -208,3 +251,3 @@ 1. Install dependencies: `npm install` | ||
## Generate the documentation | ||
## Generating the documentation | ||
@@ -235,1 +278,19 @@ Sass MQ is documented using [SassDoc](http://sassdoc.com/): | ||
- <http://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8> | ||
## Who uses Sass MQ? | ||
Sass MQ was developed in-house at [the Guardian](http://www.theguardian.com/). | ||
These companies and projects use Sass MQ: | ||
- The Guardian | ||
- BBC (Homepage, Sport, News) | ||
- The Financial Times | ||
- [Rightmove](http://www.rightmove.co.uk/) | ||
- [Stockholm International Fairs and Congress Centre](http://stockholmsmassan.se/?sc_lang=en) | ||
- [Beyond](https://bynd.com/) | ||
- [EQ Design](http://eqdesign.co.uk/) | ||
- [Baseguide](http://basegui.de/) | ||
- [Base Creative](http://www.basecreative.co.uk/) | ||
- [Locomotive](http://locomotive.ca/) | ||
- You? [Open an issue](https://github.com/sass-mq/sass-mq/issues/new?title=My%20company%20uses%20Sass%20MQ&body=Hi,%20we%27re%20using%20Sass%20MQ%20at%20[name%20of%20your%20company]%20and%20we%27d%20like%20to%20be%20mentionned%20in%20the%20README%20of%20the%20project.%20Cheers!) |
Sorry, the diff of this file is not supported yet
20588
292