[Sass] / 슬래시 기호 사용 경고

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

원인

Sass는 현재 일부 맥락에서는 / 기호를 나누기 연산으로 간주하고, 다른 맥락에서는 구분 기호로 간주하고 있습니다. 즉 Sass tkdydwksms / 의 의미를 구분하기가 어렵고 / 를 구분 기호로 사용하는 새로운 CSS 기능을 사용하기 어렵게 합니다.

호환성: Dart Sass partial

Sass는 복잡한 휴리스틱스를 사용해 / 를 분할로 처리할지 연산자로 처리해야할지 파악합니다. 그래도 구분 기호로 Sass 내에서 검사하기 어려운 따옴표가 없는 문자열을 생성합니다. CSS Grid와 같은 CSS 기능과 새로운 rgb() 및 hsl() 구문에서 / 를 구분 기호로 사용하는 겨우가 늘어나며 Sass 사용자에게는 점점 더 큰 어려움이 되고 있습니다.

Sass는 CSS의 상위 집합이므로 / 를 구분 기호로 재정의해 CSS 문법과 일치 시킵니다. / 는 현재 동작하는 방식과 유사하게 새로운 유형의 목록 구분 기호로 처리됩니다. 대신 새로운 math.div() 함수를 사용하여 나눗셈을 작성하게 됩니다. 이 기능은 현재 / 가 수행하는것과 정확히 동일하게 동작합니다.

// SCSS SYNTAX
@use "sass:math";

// Future Sass, doesn't work yet!
.item3 {
  $row: span math.div(6, 2) / 7; // A two-element slash-separated list.
  grid-row: $row;
}

// CSS OUTPUT
.item3 {
  grid-row: span 3 / 7;
}

Compatibility (math.div() and list.slash()): Dart Sass since 1.33.0

마이그레이션 자동화 도구로 해결

Sass migrator 로 math.div() 와 list.slash() 를 사용하도록 자동으로 변경할 수 있습니다.

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss