Modular Sass Media Queries for Responsive Webdesign

Modular Sass Media Queries for Responsive Webdesign

What is responsive webdesign?

It is a designing a website that looks good on both desktop and mobile. Something that appears great on mobile, might not scale well into a desktop view. Or vice versa.

When you design a site, there’s generally 2 approaches you can make

  • Mobile First
  • Desktop First

Designing a responsive site generally means you will be doing both of these things, but more so one over the other. There’s no right away to go about it. For instance, if you are designing a site dedicated to food recipes, a mobile first approach makes more sense. Designing a site specialized in legal contracts would benefit from a desktop first approach.

If we were to make a simply food recipe site, the CSS and HTML might look something like this:

<div class="container">
  <p>My Simple Food Site</p>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/LargeStockFood-min.jpg" alt="">
</div>
img {
  width: 100%;
}
.container {
  background-color: lightgrey;
  margin: 0 auto;
  width: 576px;
}

The site isn’t exactly responsive yet. The image here is 2200px wide, just to make a point. If we wanted this site to be responsive using only CSS, we would have to append media queries to the container

img {
  width: 100%;
}
.container {
  background-color: lightgrey;
  margin: 0 auto;
  max-width: 100%; /* was 550px*/
}

@media only screen and (min-width: 576px){
  .container {
    max-width: 576px;
  }
}
@media only screen and (min-width: 768px){
  .container {
    max-width: 768px;
  }
}

Now we have a responsive site. The design approach using the above method is called Mobile-First design. You first work with small mobile screens, and write all your CSS classes natively this way. As the screen goes up, you limit the max-width respectively.

Writing media queries in pure CSS is not optimal. As your site gets more complex, you start having media queries everywhere. It becomes very difficult to maintain, and becomes very verbose.

HTML will always be the same both on a desktop display and on a mobile device. When you write CSS and scale it modularally, you ideally want to have as close as a 1:1 mapping. This reduces cognitive overhead and maintenance long term.

As of now, media queries are off on its own, away from the main class. You can use a preprocessor like SASS to organize the media queries effectively. In this example, this is how you would do it:

@mixin screen-min($min) { 
  @media (min-width: $min) { 
    @content 
  } 
};
img {
  width: 100%;
}
.container {
  background-color: lightgrey;
  margin: 0 auto;
  width: 100%; /* was 550px*/
  @include screen-min(576px){max-width: 576px;}
  @include screen-min(768px){max-width: 768px;}
}

See the Pen Simple Media Queries Pt2 by Vincent Tang (@vincentntang) on CodePen.34950

This does exactly the same job as the previous example. By writing your CSS this way, there is no longer a seperate of concerns. All media queries associated with its class are inside of where it should be. So if you were to ever split your file, move things around to different folders, things are much more manageable.

Screen-min is a sass mixin, its a function that takes in an argument (in this case min-width) and generates the corresponding CSS.

This is just 1 of 3 sass mixins that you could use. The other ones look like this:

// 320px, 576px, 768px, 992px, 1200px, 1440px

// For Mobile-First Design
@mixin screen-min($min) { 
  @media (min-width: $min) { 
    @content 
  } 
};

// For Desktop-First Design
@mixin screen-max($max) { 
  @media (max-width: $max - 1) { 
    @content 
  } 
};

// For Hybrid Design
@mixin screen-minmax($min, $max){ 
  @media (min-width: $min) and (max-width: $max - 1){ 
    @content 
  }
};

If you want to define variable widths, you can define them at the top of your file, and use those instead of a specific value. Example included

$screen-sm : 576px;
$screen-md : 768px;
$screen-lg : 992px;
$screen-xl : 1200px;

Here is the same example codepen, with everything included. The 3 sass mixins you can use for responsive media queries, and additional variables you can use for breakpoints

See the Pen Simple Media Queries Pt3 by Vincent Tang (@vincentntang) on CodePen.34950

A Look Into Alternatives

This is just one way to organize media queries. It is in my opinion, the simplest way to do it. I actually have a compressed version of this binded to a hotkey, using the outlines I made in 14 useful phrase express macros developers and Write Unit Tests Faster with this Macro. Example, I type mixin#and it produces this:

Its a small 3 liner I append to the top of many of my codepen files. I don’t need to reference another CSS file or library. Additionally, I add the most common breakpoints as well, 320px, 576px, 768px, 992px, 1200px, 1440px. Not every prototype needs to be at those exact points, but its a good starting point. It all really depends on the design and content of the site.

You can find many other frameworks such as  breakpoint-sass to organize media queries, but I honestly think they are unnecessary. First it’s more things to install, more abstractions behind the scenes, and more things to break. If you take a look through it’s repo, it is roughly 300-400 lines of sass code, whereas this is a mere ~3 liner.

Other ways to write modular media queries can be found on css-tricks.

At the end of the day, you are going to have a single HTML file on a page, rendered statically or dynamically from a javascript framework like React.

And CSS to style that.

Leave a Reply

Your email address will not be published.