SASS between 함수

/**
 * 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

“SASS between 함수”에 한개의 의견

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.