EvoToolkit - v2.3.0 (Changelog)

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.

Contributors

Luke Harrison

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 ));