Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A file I have in my helpers that makes doing inline media queries pretty good :) extra-small, small, medium, large, larger, huge, massive
/* ==========================================================================
Media Queries:
How to get inline media querey
Order from small to big.
extra-small, small, medium, large, larger, huge, massive.
Should be noted when using min-width your styles outside any mediaqueries are the smallest and global.
For best pratices media queries should be in em's, they shouldnt be relative to the design and not the popular devices.
You may use pixels and swap them out at the end.
You can call the below queries like below:
e.g @include breakpoint(small) { width: 60%; }
These breakpoints use min-width for mobile first approach to webdesign.
Max-width: Is usually not the best practice for a responsive site as it requires lots of overide code.
Obviously customise this to your design.
** If you need to add any more break points I currently suggest using number increaments like the following:**
========================================================================== */
@mixin breakpoint($point) {
@if $point == massive {
@media (min-width: 120em) { @content; }
@else if $point == huge {
@media (min-width: 100em) { @content; }
@else if $point == larger {
@media (min-width: 75em) { @content; }
@else if $point == large {
@media (min-width: 60em) { @content; }
@else if $point == medium {
@media (min-width: 54em) { @content; }
@else if $point == small {
@media (min-width: 30em) { @content; }
@else if $point == extra-small {
@media (min-width: 20em) { @content; }
/* Example of all of the above
@include breakpoint(massive) {
font-size: 1.4em;
@include breakpoint(huge) {
font-size: 1.4em;
@include breakpoint(larger) {
font-size: 1.4em;
@include breakpoint(large) {
font-size: 1.4em;
@include breakpoint(medium) {
font-size: 1.4em;
@include breakpoint(small) {
font-size: 1.4em;
@include breakpoint(extra-small) {
font-size: 1.4em;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment