SASS-MQ

SASS-MQ is a third party mixin which allows us to more easily compose media queries. We give our project breakpoints easy to remember labels relating to viewport px size, which the SASS-MQ mixin then queries to match key to value.

Source

Contributors

Usage

Mixin

Here's a few basic examples of how to use the SASS-MQ mixin. Many more can be found in its documentation here.

// This will give the body a red background from the 'sm' breakpoint onwards (375px by default).
@include mq(sm) {
	body {
		background: red;
	}
}

// This will give the body a red background until the 'md' breakpoint is hit (768px by default).
@include mq($until: md) {
	body {
		background: red;
	}
}

// This will give the body a red background between the 'sm' and 'md' breakpoints.
@include mq($from: sm, $until: md) {
	body {
		background: red;
	}
}

Set Breakpoint

A function allowing you to add or edit breakpoints in $mq-breakpoints, which are used by SASS-MQ).

@include set-breakpoint((
	'md' : 800px,
	'lg4' : 1920px
));