[Sass] viewport에 반응하는 스타일 만들기

- PC 최소 사이즈보다 작은 화면에서는 모바일(태블릿) 화면을 보여준다
- 태블릿 정도 크기에서는 모바일 화면을 보여주고 좌우에 여백을 준다 (PC 화면처럼)
- 모바일 화면은 하나만 작업해서 기준 사이즈보다 작은 기기에서는 화면을 쪼그라뜨린다.

@use 'sass:map';
@use 'sass:list';
@use 'sass:math';
@use 'sass:string';

$mobile-contents-width: 720px;

$one-px: math.div(1px, $mobile-contents-width) * 100;

$digit-chars-map: (
  '0': 0,
  '1': 1,
  '2': 2,
  '3': 3,
  '4': 4,
  '5': 5,
  '6': 6,
  '7': 7,
  '8': 8,
  '9': 9,
);

@function to-length($value, $unit) { ... }

@function to-number($value) { ... }

@function remove-unit($value) { ... }

@function calc-viewport-width($value) { ... }

@function is-digit($char) { ... }

@function tokenization($str) { ... }

@mixin scale($property, $values) { ... }

@use 'sass:map';
@use 'sass:list';
@use 'sass:math';
@use 'sass:string';

$mobile-contents-width: 720px;
// PC 뷰 최소 `width`를 의미한다.
// 이보다 viewport의 width가 작으면, 단위로 `px`대신 `vw`를 사용한다.

$one-px: math.div(1px, $mobile-contents-width) * 100;
// 모바일 뷰에서 사용할 기준단위이다.

$digit-chars-map: (
  '0': 0,
  '1': 1,
  '2': 2,
  '3': 3,
  '4': 4,
  '5': 5,
  '6': 6,
  '7': 7,
  '8': 8,
  '9': 9,
);
// 숫자형 문자를 key로, 숫자를 value로 갖는 map이다.
// 특정 값이 숫자형 문자인지 판별하기 위해 사용된다.

@function to-length($value, $unit) {
  @if $unit != 'px' {
    @error "Expected 'px', but got #{$unit}.";
  }

  @return $value * 1px;
}

to-length(10, "px"); // 10px

@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    @error "Expected a string, but got #{$value}.";
  }

  $result: 0;
  $digits: 0;
  $minus: string.slice($value, 1, 1) == '-';

  @for $i from if($minus, 2, 1) through string.length($value) {
    $char: string.slice($value, $i, $i);

    // if문 🅰️
    @if not(list.index(map.keys($digit-chars-map), $char) or $char == '.') {
      @return to-length(
        if($minus, -$result, $result),
        string.slice($value, $i)
      );
    }

    // if문 🅱️
    @if $char == '.' {
      $digits: 1;
    } @else if $digits == 0 {
      $result: $result * 10 + map.get($digit-chars-map, $char);
    } @else {
      $digits: $digits * 10;
      $result: $result + math.div(map.get($digit-chars-map, $char), $digits);
    }
  }

  @return if($minus, -$result, $result);
}

to-number("1.5");  // 1.5
to-number("10px"); // 10px
to-number(35);     // 35

// if문 🅱️
@if $char == '.' {
  // 다음 순회에서는 소수 부분을 다룸.
  // $digits을 사용해야 하므로 1로 초기화
  $digits: 1;
} @else if $digits == 0 {
  // 정수 부분을 다루는 경우 ($digits 사용할 필요 ❌)
  $result: $result * 10 + map.get($digit-chars-map, $char);
} @else {
  // 소수 부분을 다루는 경우 ($digits 사용할 필요 ✅)
  $digits: $digits * 10;
  $result: $result + math.div(map.get($digit-chars-map, $char), $digits);
}

["32.14px"를 $value로 전달받는 경우]

1) $char: 3     $digits: 0      $result: 3
2) $char: 2     $digits: 0      $result: 32 (3 * 10 + 2)
3) $char: .     $digits: 1      $result: 32
4) $char: 1     $digits: 10     $result: 32.1 (32 + 0.1)
5) $char: 4     $digits: 100    $result: 32.14 (32.1 + 0.04)

$char가 "p"가 되는 순간 if문 🅰로 코드 흐름이 이동하며, 이때 $result는 32.14가 된다.

// if문 🅰️
@if not(list.index(map.keys($digit-chars-map), $char) or $char == '.') {
  // $char가 숫자형 문자도 아니고, '.'도 아닌 경우
  @return to-length(
    if($minus, -$result, $result),
    string.slice($value, $i)
  );
}

@function remove-unit($value) {
  @return math.div($value, ($value * 0 + 1));
}

remove-unit(20px) -> 20

"Any units shared both numbers will be canceled out."

math.div(1, 2);       // 0.5
math.div(100px, 5px); // 20 (상쇄!)
math.div(100px, 5);   // 20px
math.div(100px, 5s);  // 20px/s

@function calc-viewport-width($value) {
  @if type-of($value) == "number" and unit($value) == "px" {
    @return remove-unit($value * $one-px * 2) + vw
  } @else {
    @return $value;
  }
}

@function is-digit($char) {
  @if type-of($char) == 'string' {
    @return map.get($digit-chars-map, $char) != null;
  } @else {
    @return false;
  }
}

@function tokenization($str) {
  @if type-of($str) == 'string' {
    $tokens: ();
    $cursor: 0;

    @if string.index($str, '(') == null or string.index($str, ')') == null {
      @return $tokens;
    }
    @if string.index($str, 'rem') != null or string.index($str, 'em') != null {
      @error "Expected 'px', but got something else.";
    }

    @for $i from 1 through string.length($str) {
      $curr: string.slice($str, $i, $i);
      $next: string.slice($str, $i + 1, $i + 1);

      @if $curr == 'p' and $next == 'x' {
        $chars: '';
        $is-paused: false;

        @for $j from $i - 1 through 0 {
          @if $is-paused {
            // sass doesn't support break statement
          } @else {
            $curr: string.slice($str, $j, $j);

            @if is-digit($curr) or $curr == '.' or $curr == '-' {
              $chars: $curr + $chars;
            } @else {
              $is-paused: true;
            }
          }
        }

        $tokens: list.append(
          $tokens,
          ($chars + 'px', $i - string.length($chars))
        );
      }
    }

    @return $tokens;
  } @else {
    @error "The argument must be a string.";
  }
}

@for $i from 1 through string.length($str) {
  $curr: string.slice($str, $i, $i);
  $next: string.slice($str, $i + 1, $i + 1);

  @if $curr == "p" and $next == "x" {
    $chars: "";
    $is-paused: false;

    @for $j from $i - 1 through 0 {
      @if $is-paused {
        // sass doesn't support break statement
      } @else {
        $curr: string.slice($str, $j, $j);

        @if is-digit($curr) or $curr == "." or $curr == "-" {
          $chars: $curr + $chars;
        } @else {
          $is-paused: true;
        }
      }
    }

    $tokens: list.append($tokens, (
      $chars + "px",
      $i - string.length($chars),
    ));
  }
}

tokenization(translateX(50px);

1) $j: 12    $curr: "0"    $chars: "0"
2) $j: 11    $curr: "5"    $chars: "50"
3) $j: 10    $curr: "("    $chars: "50" (전부 찾았음)

@mixin scale($property, $values) {
  $attributes: ();
  $mobile-attributes: ();

  @each $value in $values {
    @if type-of($value) == 'string' {
      // 함수인 경우
      $tokens: tokenization($value);
      $cursor: 1;
      $result: '';
      $expression: $value;

      @each $token in $tokens {
        $raw: list.nth($token, 1);
        $start-index: list.nth($token, 2);
        $viewport-width: calc-viewport-width(to-number($raw));

        $part: string.slice($expression, $cursor, $start-index - 1) +
          $viewport-width;
        $cursor: $start-index + string.length($raw);
        $result: $result + $part;
      }

      $result: $result +
        string.slice($expression, $cursor, string.length($expression));

      $attributes: list.append($attributes, $value);
      $mobile-attributes: list.append(
        $mobile-attributes,
        string.unquote($result)
      );
    } @else if type-of($value) == 'number' {
      // 단위를 사용하는 숫자인 경우
      $viewport-width: calc-viewport-width($value);
      $attributes: list.append($attributes, $value);
      $mobile-attributes: list.append($mobile-attributes, $viewport-width);
    } @else {
      // 단위를 사용하지 않는 값인 경우  (ex. black, rgba(0, 0, 0, 0.12) 등)
      $attributes: list.append($attributes, $value);
      $mobile-attributes: list.append($mobile-attributes, $value);
    }
  }

  @if length($attributes) > 0 {
    #{$property}: $attributes;
  }

  @if length($mobile-attributes) > 0 {
    @media (max-width: $mobile-contents-width) {
      #{$property}: $mobile-attributes;
    }
  }
}

// 1️⃣ 함수 ❌
@include scale(border, 1px solid black); // 1px: number, solid: string, black: color
@include scale(display, none);

// 2️⃣ 함수 ⭕️
@include scale(transform, translateX(50px));

$value: "translateX(50px)";

$tokens: tokenization($value); // (("50px", 11))
$cursor: 1;
$result: '';
$expression: $value;

$raw: list.nth($token, 1);         // "50px"
$start-index: list.nth($token, 2); // 11

$viewport-width: calc-viewport-width(to-number($raw)); // 11.1111111111vw

$part: string.slice($expression, $cursor, $start-index - 1) + $viewport-width;
$result: $result + $part;
// $part: translateX(11.1111111111vw

$cursor: $start-index + string.length($raw); // 15
$result: $result + string.slice($expression, $cursor, string.length($expression));
// $result: translateX(11.1111111111vw)

$attributes: list.append($attributes, $value);
$mobile-attributes: list.append(
  $mobile-attributes,
  string.unquote($result)
);