[SCSS] Sass Variable in calc() function Error

SCSS문법을 사용하여 스타일을 주던 중 calc() 함수에 SCSS변수를 넣어 계산을 하려고 하였더니 빌드 오류가 발생하였다.

이렇게 사용하면 안 되는 건가? 싶어 레퍼런스 조사를 해보았더니 SCSS변수를 calc() 함수에 넣어서 사용하려면 "보간 문법"을 사용해야 한다고 한다.

이렇게 까지 귀찮을 일인가?

고작 변수를 가져다 계산에 사용하려는 건데 보간문법(#{})까지 써야 한다니 여간 불편한 게 아닌가 싶었다.

그리고 몇 가지 의문들이 해결이 안되었다.

1. 참고한 레퍼런스의 sass버전을 알 수 없었다.
   이게 버전 문제가 아닌가라는 의문도 들었고, 우리랑 같은 환경이 아닌 이상 언제든지 상황은 바뀔 수 있다고 생각된다.
2. sass 개발진들이 이렇게 귀찮은 것들을 그대로 방치했을까?
   말 그대로다. 빠르게 발전하는 프엔 환경상 이렇게 불편한 것을 그대로 방치해 뒀을 거라는 생각이 들지 않는다.
3. 회사에서 사용했을 때 어떤 레포에서는 오류가 발생하고, 어떤 레포에서는 오류가 발생하지 않았다!
   왜 그럴까...?

이러한 의문들이 아직 존재했기에 찾아본 레퍼런스를 뒤로하고 좀 더 깊게 파보기로 하였다.

자 의문을 해결해 보자!

우선 1, 2번 둘 다 궁금하기는 한데 당장 이해가 안 됐던 건 3번이었다.

그래서 각 레포의 환경을 조사했을 때 다음과 같았다.

• 오류가 발생한 레포의 sass 버전 : node-sass ^4.13.1
• 정상 동작한 레포의 sass 버전 : sass ^1.51.0

둘의 차이에 대해 아는 게 없어서 이번에는 ChatGPT의 도움을 받아볼까 한다.

"node-sass와 sass의 차이가 뭐야?"

- Node-sass: Node-sass는 LibSass의 Node.js 바인딩으로, LibSass의 버전에 따라 업데이트됩니다. 이것은 Node.js 환경에서 Sass를 사용하기 위한 속도와 효율성을 제공합니다.
- Sass: Sass는 Ruby 버전과 Dart Sass 버전이 있으며, 둘 다 원본 Sass 언어를 사용하여 CSS를 생성합니다. Ruby Sass는 더 이상 업데이트되지 않고, Dart Sass가 Sass의 공식 구현체가 되었습니다.

자 재밌게도 이 답변으로 인해 내가 위에서 제시한 의문들이 해결되었다는 점이다.

Sass 공식문서를 살펴보면 calc() 함수에 대한 내용도 당연히 존재한다.

https://sass-lang.com/documentation/values/calculations/

Sass: Calculations

문서 내용을 살펴보면 당연하게도 calc() 함수가 처음부터 제대로 지원이 되었던 건 아닌 거 같다.

그렇기 때문에 보간문법을 사용해야 한다는 레퍼런스도 존재하니까 말이다.

 

호환성 영역을 보면 이렇게 되어있다.

Dart Sass(since 1.40.0) / LibSass(X) / Ruby Sass(X)

이 호환성으로 인해 의문이었던 1, 2번이 동시에 해결되었다.

그러면 calc() 함수 오류가 언제부터 잡혔던 걸까?

그냥 문득 궁금해졌다.

보간문법은 애초에 문자열로 취급되어 계산법이 이상해지는 현상이 발생할 수 있어 공식문서에서도 권장하지 않는 문법이다.

 

언제부터 변수를 그대로 사용할 수 있도록 지원한 걸까?

2021년 9월 14일 Dart Sass 1.40.0이 등장하면서 지원이 가능해졌다.

https://github.com/sass/dart-sass/releases/tag/1.40.0

Release Dart Sass 1.40.0 · sass/dart-sass

내가 찾아봤던 레퍼런스들의 작성일자를 보면 이 버전이 등장하기 이전인 것으로 보아 그것 역시 그 시점에서는 올바른 해결방법이었을 것이다.

의문만 없었으면 그대로 사용하여 해결했을 텐데 의문이 들어서 이렇게 하나하나 파보고 잘 배우고 간다.