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, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn