Skip to content

Commit

Permalink
Merge 'sass-mq:master'
Browse files Browse the repository at this point in the history 
Merged:
- 5.0.1
- Compile SassDoc
- Deprecate $mq-base-font-size setting (sass-mq#123)
- Regenerate package-lock.json (sass-mq#121)
- Update dev dependencies (sass-mq#120)
- Update README.md
- Update README.md
- Remove Node 4 tests, add Node 11 tests (sass-mq#119)
- Update dependencies
- Stop using latin abbreviations
- Add install and usage steps for yarn and webpack
- Compile SassDoc
- Add Taylor / Thomas to the list of users - fixes sass-mq#117
- Update tests
- Compile SassDoc
- Improve documentation for $mq-show-breakpoints
  • Loading branch information
@mcaskill
mcaskill committed Apr 19, 2020
2 parents 818886d + 8243327 commit ea19312
Show file tree
Hide file tree
Showing 15 changed files with 3,017 additions and 1,216 deletions.
3 changes: 1 addition & 2 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
language: node_js
node_js:
- "4"
- "6"
- "8"
- "9"
- "10"
- "11"
before_install:
- rvm install 2.2.2
- npm i npx
Expand Down
38 changes: 23 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Media Queries with superpowers [![Build Status](https://api.travis-ci.org/mcaskill/sass-mq.svg?branch=master)](https://travis-ci.org/mcaskill/sass-mq)
<div align="center">
<img width="300" height="300" src="https://raw.githubusercontent.com/mcaskill/sass-mq/master/icon.png" alt="Awesome">
</div>

![ ](https://raw.githubusercontent.com/mcaskill/sass-mq/master/icon.png)

----
# Media Queries with superpowers [![Build Status](https://api.travis-ci.org/mcaskill/sass-mq.svg?branch=master)](https://travis-ci.org/sass-mq/sass-mq)

**`mq()`+** is a [Sass](http://sass-lang.com/ "Sass - Syntactically Awesome Stylesheets") library that helps you compose media queries in an elegant way.

Expand Down Expand Up @@ -67,18 +67,18 @@ Compiles to:
}
```

----

_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

_The original `mq()` can be played with on [SassMeister](http://sassmeister.com/): `@import 'mq';`._

1. Install with [Bower](http://bower.io/ "Bower: A package manager for the web"): `bower install mcaskill-sass-mq --save`

OR Install with [npm](https://www.npmjs.com/): `npm install @mcaskill/sass-mq --save` _it supports [eyeglass](https://github.com/sass-eyeglass/eyeglass)_
1. Install:
- with [Bower](http://bower.io/ "Bower: A package manager for the web"): `bower install mcaskill-sass-mq --save`
- with [npm](https://www.npmjs.com/): `npm install @mcaskill/sass-mq --save` _supports [eyeglass](https://github.com/sass-eyeglass/eyeglass)_
- with [yarn](https://www.yarnpkg.com/): `yarn add @mcaskill/sass-mq` _supports [eyeglass](https://github.com/sass-eyeglass/eyeglass)_

OR [Download _mq.scss](https://raw.github.com/mcaskill/sass-mq/master/_mq.scss) to your Sass project.
OR [Download _mq.scss](https://raw.github.com/mcaskill/sass-mq/master/_mq.scss) into your Sass project.

2. Import the partial in your Sass files and override default settings
with your own preferences before the file is imported:
Expand All @@ -105,17 +105,20 @@ _The original `mq()` can be played with on [SassMeister](http://sassmeister.com/

// Define the breakpoint from the $mq-breakpoints list that should
// be used as the target width when outputting a static stylesheet
// (i.e. when $mq-responsive is set to 'false').
// (when $mq-responsive is set to 'false').
$mq-static-breakpoint: desktop;

// If you want to display the currently active breakpoint in the top
// right corner of your site during development, add the breakpoints
// to this list, ordered by width, e.g. (mobile, tablet, desktop).
// to this list, ordered by width. For example: (mobile, tablet, desktop).
$mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);

// If _mq.scss is in your project:
@import 'path/to/mq';
// With eyeglass:
// @import 'sass-mq';
@import '@mcaskill/sass-mq';
// With webpack (and boilerplates such as create-react-app)
@import '~@mcaskill/sass-mq';
```
3. Play around with `mq()` (see below)

Expand Down Expand Up @@ -203,7 +206,7 @@ $mq-static-breakpoint: desktop;

### Verbose and shortand notations

Sometimes you’ll want to be extra verbose (e.g. if you’re developing a
Sometimes you’ll want to be extra verbose (for example, if you’re developing a
library based on top of sass-mq), however for readability in a codebase,
the shorthand notation is recommended.

Expand Down Expand Up @@ -305,7 +308,12 @@ be a list of the breakpoints you want to debug, ordered by width.
The name of the active breakpoint and its pixel and em values will
then be shown in the top right corner of the viewport.

![$mq-show-breakpoints](https://raw.githubusercontent.com/mcaskill/sass-mq/master/show-breakpoints.gif)
```scss
// Adapt the list to include breakpoint names from your project
$mq-show-breakpoints: (phone, phablet, tablet);
```

![$mq-show-breakpoints](https://raw.githubusercontent.com/sass-mq/sass-mq/master/show-breakpoints.gif)

## Running tests

Expand Down
68 changes: 42 additions & 26 deletions _mq.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
// See https://github.com/sass-mq/sass-mq/pull/10

/// Base font size on the `<body>` element
///
/// Do not override this value, or things will break
///
/// @link https://github.com/sass-mq/sass-mq/issues/122
/// @deprecated This setting will be removed in sass-mq v6.0.0
/// @access private
/// @type Number (unit)
$mq-base-font-size: 16px !default;

Expand Down Expand Up @@ -48,7 +54,7 @@ $mq-breakpoints: (
/// // tablet-only.scss
/// //
/// // Ignore all styles above tablet breakpoint,
/// // and fix the styles (e.g. layout) at tablet width
/// // and fix the styles (such as the layout) at tablet width
/// $mq-responsive: false;
/// $mq-static-breakpoint: tablet;
/// @import 'main'; // @media queries in this file will be rasterized up to tablet
Expand All @@ -62,12 +68,16 @@ $mq-static-breakpoint: desktop !default;
///
/// If you want to display the currently active breakpoint in the top
/// right corner of your site during development, add the breakpoints
/// to this list, ordered by length, e.g. (mobile, tablet, desktop).
/// to this list, ordered by length. For example: (mobile, tablet, desktop).
///
/// @example scss
/// $mq-show-breakpoints: (mobile, tablet, desktop);
/// @import 'path/to/mq';
///
/// @type map
$mq-show-breakpoints: () !default;

/// Customize the media type (e.g. `@media screen` or `@media print`)
/// Customize the media type (for example: `@media screen` or `@media print`)
/// By default sass-mq uses an "all" media type (`@media all and …`)
///
/// @type String
Expand All @@ -77,7 +87,7 @@ $mq-media-type: all !default;
/// Convert pixels to ems
///
/// @param {Number} $px - value to convert
/// @param {Number} $base-font-size ($mq-base-font-size) - `<body>` font size
/// @ignore @param {Number} $base-font-size [$mq-base-font-size] - `<body>` font size (deprecated)
///
/// @example scss
/// $font-size-in-ems: mq-px2em(16px);
Expand All @@ -86,6 +96,12 @@ $mq-media-type: all !default;
/// @requires $mq-base-font-size
/// @returns {Number}
@function mq-px2em($px, $base-font-size: $mq-base-font-size) {
@if ($mq-base-font-size != 16px) {
@warn "Overriding $mq-base-font-size will break things, see https://github.com/sass-mq/sass-mq/issues/122.";
}
@if ($base-font-size != 16px) {
@warn "The $base-font-size argument will be removed in sass-mq v6.0.0, as overriding it breaks things, see https://github.com/sass-mq/sass-mq/issues/122.";
}
@if unitless($px) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
@return mq-px2em($px * 1px, $base-font-size);
Expand Down Expand Up @@ -117,8 +133,8 @@ $mq-media-type: all !default;
/// Parse a breakpoint
///
/// @param {String | Number} $value - Length of the breakpoint. One of $breakpoints
/// @param {Boolean} $exclusive (false) - Should the value be an exclusive boundary
/// @param {Map} $breakpoints ($mq-breakpoints) - Map of breakpoints
/// @param {Boolean} $exclusive [false] - Should the value be an exclusive boundary
/// @param {Map} $breakpoints [$mq-breakpoints] - Map of breakpoints
///
/// @example scss
/// @media (min-width: mq-parse-breakpoint(380px)) {}
Expand All @@ -142,7 +158,7 @@ $mq-media-type: all !default;
/// @ignore Documentation: http://sassylists.com/documentation.html#sl-to-string
///
/// @param {List} $list - list to cast
/// @param {String} $glue (' and ') - value to use as a join string
/// @param {String} $glue [' and '] - value to use as a join string
///
/// @example scss
/// mq-stringify(a b c)
Expand Down Expand Up @@ -171,16 +187,16 @@ $mq-media-type: all !default;
///
/// Computes a media query based on a list of conditions.
///
/// @param {String | Boolean} $from (false) - One of $mq-breakpoints
/// @param {String | Boolean} $until (false) - One of $mq-breakpoints
/// @param {String | Boolean} $and (false) - Additional media query parameters
/// @param {String | Boolean} $or (false) - Alternative media query parameters
/// @param {String} $media-feature (width) - Media feature: width or height of the output device's rendering surface
/// @param {String} $media-type ($mq-media-type) - Media type: screen, print…
/// @param {String | Boolean} $from [false] - One of $mq-breakpoints
/// @param {String | Boolean} $until [false] - One of $mq-breakpoints
/// @param {String | Boolean} $and [false] - Additional media query parameters
/// @param {String | Boolean} $or [false] - Alternative media query parameters
/// @param {String} $media-feature [width] - Media feature: width or height of the output device's rendering surface
/// @param {String} $media-type [$mq-media-type] - Media type: screen, print…
///
/// @ignore Undocumented API, for advanced use only:
/// @ignore @param {Map} $breakpoints ($mq-breakpoints)
/// @ignore @param {String} $static-breakpoint ($mq-static-breakpoint)
/// @ignore @param {Map} $breakpoints [$mq-breakpoints]
/// @ignore @param {String} $static-breakpoint [$mq-static-breakpoint]
///
/// @requires {Variable} $mq-media-type
/// @requires {Variable} $mq-breakpoints
Expand Down Expand Up @@ -262,17 +278,17 @@ $mq-media-type: all !default;
/// Generates a media query block, based on a list of conditions, around a set
/// of nested CSS statements.
///
/// @param {String | Boolean} $from (false) - One of $mq-breakpoints
/// @param {String | Boolean} $until (false) - One of $mq-breakpoints
/// @param {String | Boolean} $and (false) - Additional media query parameters
/// @param {String | Boolean} $or (false) - Alternative media query parameters
/// @param {String} $media-feature (width) - Media feature: width or height of the output device's rendering surface
/// @param {String} $media-type ($mq-media-type) - Media type: screen, print…
/// @param {String | Boolean} $from [false] - One of $mq-breakpoints
/// @param {String | Boolean} $until [false] - One of $mq-breakpoints
/// @param {String | Boolean} $and [false] - Additional media query parameters
/// @param {String | Boolean} $or [false] - Alternative media query parameters
/// @param {String} $media-feature [width] - Media feature: width or height of the output device's rendering surface
/// @param {String} $media-type [$mq-media-type] - Media type: screen, print…
///
/// @ignore Undocumented API, for advanced use only:
/// @ignore @param {Map} $breakpoints ($mq-breakpoints)
/// @ignore @param {Boolean} $responsive ($mq-responsive)
/// @ignore @param {String} $static-breakpoint ($mq-static-breakpoint)
/// @ignore @param {Map} $breakpoints [$mq-breakpoints]
/// @ignore @param {Boolean} $responsive [$mq-responsive]
/// @ignore @param {String} $static-breakpoint [$mq-static-breakpoint]
///
/// @content styling rules, wrapped into a @media query when $responsive is true
///
Expand Down Expand Up @@ -438,8 +454,8 @@ $mq-media-type: all !default;
/// Show the active breakpoint in the top right corner of the viewport
/// @link https://github.com/mcaskill/sass-mq#seeing-the-currently-active-breakpoint
///
/// @param {List} $show-breakpoints ($mq-show-breakpoints) - List of breakpoints to show in the top right corner
/// @param {Map} $breakpoints ($mq-breakpoints) - Breakpoint names and sizes
/// @param {List} $show-breakpoints [$mq-show-breakpoints] - List of breakpoints to show in the top right corner
/// @param {Map} $breakpoints [$mq-breakpoints] - Breakpoint names and sizes
///
/// @requires {Variable} $mq-breakpoints
/// @requires {Variable} $mq-show-breakpoints
Expand Down

0 comments on commit ea19312

Please sign in to comment.