Media Query Sass Mixin [code snippet]

Updated on October 30th, 2020
read

The sass mixin below has default variable values for common breakpoints. But this mixin also allows you to write a custom value if needed.

// default breakpknts
$xs: "480px";
$sm: "600px";
$md: "799px";
$lg: "1010px";
$xl: "1280px";

@mixin media-min($size) {
  @media (min-width: $size) {
    @content;
  }
}
@mixin media-max($size) {
  @media (max-width: $size) {
    @content;
  }
}

// Using a variable
@include media-max($sm) { 
    body {color:red}
}

// Custom value 
@include media-min(300px) { 
    body {color:red}
}

// default breakpknts

$xs: "480px";

$sm: "600px";

$md: "799px";

$lg: "1010px";

$xl: "1280px";

@mixin media-min($size) {

@media (min-width: $size) {

@content;

}

@mixin media-max($size) {

@media (max-width: $size) {

@content;

}

// Using a variable

@include media-max($sm) {

body {color:red}

}

// Custom value

@include media-min(300px) {

body {color:red}

}

Written by: Jacob Lett - Jacob is a marketing and web design consultant who helps manufacturers grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Code Snippets
Tags: HTML CSS

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Want to learn Bootstrap 4 Fast?

Get book, video training, cheat sheets, and templates.

Learn Bootstrap

Advertise Here

Share this:

Want to Get Email Updates?

Want to learn Bootstrap 4 Fast?