scss vw 변환 함수 사용

반응형 코딩시 %계산만 사용해오다 vw를 사용하는식으로 최근에 작업을 했는데 괜찮은듯하여 기록한다.

모바일 디자인만 있고(최대 840px) 이하로 줄어들면 비율대로 줄어야하는 case 였다.

$mobile-size: 840;

/* vw 변환 function */
@function vw($target) {
  @if type-of($target) == number {
    @return calc(($target * 100) / $mobile-size) * 1vw;
  } @else if type-of($target) == list {
    $vw: ();
    @each $value in $target {
      @if type-of($value) == number {
        $vw: append($vw, calc(($value * 100) / $mobile-size) * 1vw);
      } @else if type-of($value) == string {
        $vw: append($vw, $value);
      }
    }
    @return $vw;
  } @else {
    @return $target;
  }
}

 

위와 같이 vw function만 정의해두면 쉽게 사용할 수 있다.

나는 vue+ts+scss 환경이어서 바로 호출하여 사용가능했다. 아래는 사용 예시.

@media only screen and (max-width: $mobile-max-width) {
  .step {
    padding: vw(70 0 100 0);

    .title {
      margin-top: vw(50);
    }

    &.step-1 {
      .title {
        img {
          width: vw(360);
          height: vw(144);
        }
      }

      .button-container {
        margin-top: vw(60);

        button {
          width: vw(520);
          height: vw(120);
          border-radius: vw(60);
          font-size: vw(40);
        }
      }
    }

    &.step-2 {
      background-size: vw(840 1323);

      .step-header {
        .title {
          margin-top: vw(50);

          img {
            width: vw(486);
            height: vw(64);
          }
        }
      }

      .step-content {
        margin-top: vw(101);
      }
    }
  }
}

840기준으로 디자인 된 상태에서의 여백이나 이미지가로값을 인자로 넘겨주면 vw로 변환된 값이 할당된다.

단순히 medai query만 정의하고 내부에는 vw에 가로에 디자인상 수치만 입력해주면 끝이다.