[태그:] sass

/**
 * 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});
}

$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;
  }
}