/** * Computes a CSS calc function that betweens a value from * A to B over viewport-width A to viewport-width B. * Requires a media query to cap the value at B. */ @function between($to, $from, $toWidth, $fromWidth) { $slope: ($to - $from) / ($toWidth - $fromWidth); $base: $from - $slope * $fromWidth; @return calc(#{$base} + #{100vw * $slope}); }
vw 단위를 활용하여 미디어쿼리 분기의 중간 상태값을 계산해주는 SASS함수입니다.
간격이나 폰트사이즈에 적용하면 자연스러운 반응형 사이즈 처리가 가능해집니다.
사용 예제
$small: 400px; $large: 1000px; .Container { align-items: center; background-color: #0087be; border: 10px solid #f25292; display: flex; padding: 20px; @media (min-width: $small) { padding: between(20px, 100px, $small, $large); } @media (min-width: $large) { padding: 100px; } }
출처 : https://css-tricks.com/between-the-lines/
예제 : http://codepen.io/dbj/pen/rybJKO
역시 스님