DEV Community

Cover image for A Loop can Save 60% Code on Conditional Media Query Mixins || 2021🔥
Joy Shaheb
Joy Shaheb

Posted on • Updated on

A Loop can Save 60% Code on Conditional Media Query Mixins || 2021🔥

If other developers are having a difficult time reading your code, then, my Friend, You're doing it Wrong.

In this Blog, I'll share a way to save as much as 60% of code & time in conditional media query mixins using loops So that, Making Responsive Websites becomes as easy as Drinking Coffee in 2021❤️️

Table of contents 🔥

CodePen 🔥

You can find the full code on Codepen

Setup 🔥

HTML :

Copy the code below 👇

<div id="width"></div>
<div class="box"></div>
<div class="text">Resize window to see changes</div>

Enter fullscreen mode Exit fullscreen mode

JavaScript :

To see the screen width in real time, Copy this code 👇

window.onresize = screen;
window.onload = screen;

function screen() {
  myWidth = window.innerWidth;
  document.getElementById("width").innerHTML = "Width : " + myWidth + " px" 
    };

Enter fullscreen mode Exit fullscreen mode

SCSS :

In order to make the loops work, we're gonna place all the screen sizes on a map, and create a color palette for various screen sizes. Like This 👇


// Defining Values in map variables
// If you need to change screen size or color,
// Change it in the $bp, $color map.

$bp : (
  mobile  : 480px,
  tablet  : 768px,
  laptop  : 1024px,
  desktop : 1440px,
  four-k  : 1441px,
);

$color : (
  //   Always write the largest Display First
  //  When using a map with @each loops
  four-k  : red,
  desktop : blue,
  laptop  : purple,
  tablet  : orange,
  mobile  : green,
);

Enter fullscreen mode Exit fullscreen mode

Now, Let's Create the Main Sauce 🤯 ****


@mixin query($screen){
  @each $key,$value in $bp{

    //  defining max-width

    @if ($screen == $key and $screen !=four-k) {
      @media (max-width : $value){@content};
    }

    //  defining min-width

    @if ($screen == four-k){
      @media (min-width : $value){@content};
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

Paste the default Settings on SCSS file

// Changing Default Settings 
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  body{
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    font-family: sans-serif;
    background-color: black;
    color: white;
    font-size:30px;
  }
}

.text{
  font-size: 17px;
}


Enter fullscreen mode Exit fullscreen mode

Time to drop the Bomb 💣💥🤯

// Implementing the code here with loops
// If you need to change screen size or color,
// Change it in the $bp, $color map.


.box{
  //   Size of the box
  width: 120px;
  height: 120px;
  //   To Place the text at the center
  display: grid;
  place-items: center;
  //   Loop
  @each $key, $value in $color{

    //  *** Remember, Largest Screen First ***

    @include query($key){
      background-color: $value;

      //  Putting screen size names inside the box **(Optional)**

      &:after{
        content: '#{$key}';
      }

    } 
  }
}

Enter fullscreen mode Exit fullscreen mode

BUT.....

What if, you just need to change 1 property in 1 media query?
In this case, do this 👇

.box{
  width: 120px;
  height: 120px;

    //  *** Remember, Largest Screen First ***
    // *** pick any screen size name from $bp

    @include query(mobile){
      background-color: pink;
    } 
}

Enter fullscreen mode Exit fullscreen mode

Conclusion :

Suggestions & Criticisms are Highly Appreciated ❤️️

Top comments (3)

Collapse
 
ashishkumar profile image
Ashish Kumar • Edited

Point # 1: So with this loop, what is the css going to be generated? Looks like this will create more vas than simple media query, because in most of the cases, we dont need to define a lot of queries, but just 1 or 2 break points. So in the final das, its not saving some lines of code, but in reason the same.

Point #2: Building time, with this loop building time is going to more for SCSS than simple media query.

I prefer to keep things simple and would reject such code in my code review.

Collapse
 
joyshaheb profile image
Joy Shaheb

Point # 1 :

This blog is designed to stop code repetition. Let's say we need 5 media queries to change values of the same property. For example, we need the font-size on 5 screen sizes to be 10px, 20px, 30px, 40px, 50px. We input the values in a map, and then we use a loop, just like the one in the blog.

Point # 2 :

If you need to change a single property, in 1 media query(screen size) then just write like this.
@include query(pick_a_display_name_from_$bp){
font-size : 25px;
}

I updated this at the post at "BUT..." section.

Thank You for the feedback. Happy Coding ❤️️

Some comments may only be visible to logged-in visitors. Sign in to view all comments.