Crafting a Responsive Design: Creating a Media Queries Mixin in Sass

In web development, it's important to create a design that works well on different screen sizes. A robust method to achieve this is by employing media queries. But, writing many media queries can become tedious. Here's where a Sass Mixin for media queries comes to the rescue. In this article, we will make a Media Queries Mixin using the min-width technique. We will also create a Sass map to link names with screen widths, using em as the unit.

Setting up the Breakpoints

Before delving into the Mixin, let’s set up a Sass map for our breakpoints. A Sass map is a data type that holds key-value pairs. We will use the breakpoint names (xxs, xs, sm, md, lg, xl) as our keys. The corresponding min-width values will be in em units.

$breakpoints: (
  xxs: 20em,  // 320px
  xs: 30em,   // 480px
  sm: 48em,   // 768px
  md: 64em,   // 1024px
  lg: 80em,   // 1280px
  xl: 120em   // 1920px
);

Crafting the Media Queries Mixin

Now, let's create our media queries mixin. The mixin takes the breakpoint name as argument. Mixins let you make styles that you can use over and over again in your stylesheet. Mixins are defined using the @mixin at-rule, which is written @mixin { ... } or @mixin name() { ... }

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

Implementing the Mixin in our SCSS file

With our mixin crafted, we can now apply media queries in our SCSS file. Mixins are included into the current context using the @include at-rule, which is written @include or @include ()

@include mq(md, {
  .container {
    width: 80%;
  }
});

HTML & SCSS Example Files

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.scss">
<title>Responsive Design with Sass Mixin</title>
</head>
<body>
<div class="container">
  Responsive Content
</div>
</body>
</html>

SCSS (styles.scss)

$breakpoints: (
  xxs: 20em,
  xs: 30em,
  sm: 48em,
  md: 64em,
  lg: 80em,
  xl: 120em
);

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

$breakpoints: (
  xxs: 20em,
  xs: 30em,
  sm: 48em,
  md: 64em,
  lg: 80em,
  xl: 120em
);

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

.container {
  background-color: #222;
  color: #fff;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  width: 100%;

  @include mq(md) {
    width: 80%;
  };
}

Final result

This setup helps us manage media queries easily, making our stylesheet easier to read and maintain. We made it easier to create responsive designs by using a Sass mixin and breakpoints map.

Blog

Crafting a Responsive Design: Creating a Media Queries Mixin in Sass

joachim kliemann

Setting up the Breakpoints

Crafting the Media Queries Mixin

Implementing the Mixin in our SCSS file

HTML & SCSS Example Files

Final result

Join Our Newsletter. No Spam, Only the good stuff.

Related