A Loop can Save 60% Code on Conditional Media Query Mixins || 2021🔥
Tags: codepen, css, webdev, productivity
Published: 2020-12-17 20:43:31

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](#chapter-1)
   * [Setup](#chapter-2)
   * [Conclusion](#chapter-3)


#**CodePen 🔥** <a name="chapter-1"></a>

**You can find the full code on [Codepen](https://codepen.io/joyshaheb/pen/YzGQKWG)**

{% codepen https://codepen.io/joyshaheb/pen/YzGQKWG %}

#**Setup 🔥** <a name="chapter-2"></a>

## HTML :

Copy the code below 👇

```HTML
<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 👇

```Javascript
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 👇


```SCSS

// 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 🤯 ****

```SCSS 

@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 

```SCSS
// 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 💣💥🤯 

```SCSS
// 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 👇

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

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

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

```


# **Conclusion :** <a name="chapter-3"></a>

###**Suggestions & Criticisms are Highly Appreciated ❤️️**


   * **Youtube[ / Joy Shaheb](youtube.com/channel/UCHG7IJuST_BXJkne-0u0Xtw)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**