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.
Top comments (0)