다른 개발자들이 당신의 코드를 읽는 데 어려움을 겪고 있다면 친구여, 당신은 잘못하고 있는 것입니다.

이 블로그에서는 루프를 사용하여 조건부 미디어 쿼리 믹스인에서 코드 및 시간을 최대 60% 절약하는 방법을 공유하여 2021년에는 반응형 웹사이트를 만드는 것이 커피를 마시는 것처럼 쉬워집니다❤️️

목차 🔥

CodePen

Setup

Conclusion

코드펜 🔥

You can find the full code on Codepen

설정 🔥

HTML:

아래 코드를 복사하세요 👇

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

자바스크립트:

화면 너비를 실시간으로 확인하려면 이 코드를 복사하세요 👇

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

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

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

이제 메인 소스를 만들어 봅시다 🤯 ****

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

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

폭탄을 떨어뜨릴 시간 💣💥🤯

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

    } 
  }
}

하지만.....

1개의 미디어 쿼리에서 1개의 속성만 변경해야 한다면?
이럴 땐 이렇게 하세요👇

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

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

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

결론 :

제안과 비판은 매우 감사합니다 ❤️

유튜브

트위터

인스타그램