DEV Community

loading...
Cover image for A Loop can Save 60% Code on Conditional Media Query Mixins || 2021πŸ”₯

A Loop can Save 60% Code on Conditional Media Query Mixins || 2021πŸ”₯

joyshaheb profile image Joy Shaheb ・Updated on ・2 min read

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 ❀️️

Discussion (3)

pic
Editor guide
Collapse
ashishkumar profile image
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.

Collapse
joyshaheb profile image
Joy Shaheb Author

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 ❀️️

Collapse
dbillio profile image
DBillio

That is a really interesting theory. If it will realize, that wiull be greate!