[CSS] 반응형 공간 작업 (with SASS)

만약 반응형 시안이 1000px 이라 가정하자 

1000px 기준으로 모바일 미리보기를 잡아놓고 만약 위의 간격을 30px로 줘야한다 가정하면,

vw 함수를 사용하여 padding-top: vw(30); 을 주면 된다.

 

_vw.scss

// 미디어 쿼리 사이즈
$mediaResponsiveSize: 1024px;
// 시안 사이즈
$mediaPSD: 1000px;

$mediaPSD-function: remove-unit($mediaPSD);
@function vw($val, $std: $mediaPSD-function) {
  @return ($val / ($std / 100)) * 1vw;
}