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
• Setup
• Conclusion

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>

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" 
    };

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,
);

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};
    }
  }
}

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;
}

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}';
      }

    } 
  }
}

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;
    } 
}

Conclusion :

Suggestions & Criticisms are Highly Appreciated ❤️️

• Youtube / Joy Shaheb

• Twitter / JoyShaheb

• Instagram / JoyShaheb

Comments

[Ashish Kumar]

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.

[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 ❤️️