[SASS(SCSS)] @mix-in : px 값 vw 값으로 단위 변환하기

웹뷰나 모바일 버전 작업시

뷰포트 단위인 vw를 사용하여 개발을 하고있다.

하지만, 디자인에서 넘어오는 단위는 px값인데

이럴때 SASS에서 mixin을 사용하여 px값을 vw값으로 변환하여 사용할 수 있다.

 

[mixin.scss]

$mobile-contents-width: 360px;

@mixin vw($property, $px)  {

//viewport 계산식
  $viewportWidth: math.div(1px, $mobile-contents-width) * 100;
  $pxs: null;
  $vws: null;

//속성값이 1개일경우, 여러개일 경우
  @each $value in $px {
    @if type-of($value) == 'number' {
      $px: math.div($value, 1px);
      $pxs: append($pxs, if($px == 0, 0, $px + px));
      $vw: $px * $viewportWidth;
      $vws: append($vws, if($vw == 0, 0, $vw + vw));
    }
    @else {
      $pxs: append($pxs, $value);
      $vws: append($vws, $value);
    }
  }
  
  //모바일 사이즈에서만 사용
  @media (max-width: $mobile-contents-width) {
  #{$property}: $vws;
  }
}

vw라는 mixin을 만들어주었다.

 

 

[page.scss]

@import '../abstracts/mixin';

.page_detail {
  @include vw(margin-top, 50px);
  &__info {
  @include vw(padding, 30px 16px 15px);
  border-bottom: 1px solid #e7e7e7;
    p {
      @include vw(margin-bottom, 30px);
      @include vw(font-size, 20px);
      font-weight: 600;
      word-break: keep-all;
    }
    span {
    display: block;
    text-align: right;
    color: #9d9d9d;
    @include vw(font-size, 12px);
    }
  }

적용할 페이지 상단에 mixin.scss를 import 해주고,

@include vw(padding, 30px 16px 0px 15px);

위와 같은 형식으로 include해주면 vw로 변환되어 적용된다.

 

값이 "0" 일때도 px을 붙혀줘야 에러가 안남.