반응형
sass로 선언된 변수(variable)의 경우 css 기본 함수 속성인 calc()와 함께 사용할 때 충돌이 일어나곤 합니다. 사실 이 경우는 sass 변수를 호출할 때 괄호를 포함하는 속성에 값을 할당할 때에 공통적으로 문제가 될 수 있는 사항이기도 합니다. 문제 해결 방법은 간단합니다. sass 변수의 호출을 #{} 괄호(interpolations with curly braces)를 씌운 다음에 진행하면 됩니다. 이 방법은 ()를 포함하는 대부분의 변수 호출 상황에 공통적으로 문제해결 방법으로 작용할 수 있지만, 예외 사항이 있을 수 있습니다.
오류 발생 코드
max-height: calc(100vh - $top-popup-offset);문제 해결 코드
- 원인: () 안에 sass 변수 호출 시 리터럴 참조 문제
- 해결: #{}를 변수에 추가하여 호출
- 비고: ()를 포함하는 문장에서 sass 변수를 호출할 때 공통적으로 응용 가능할 것으로 보임
max-height: calc(100vh - #{$top-popup-offset});더 알아 볼 내용
반응형