Sass가 `calc()` 함수 내부의 변수를 해결하지 못하는 이유는 무엇입니까?

CSS Calc() 함수의 Sass 변수: 해결되지 않은 변수 오류

Sass의 calc() 함수를 활용하면 Sass가 다음과 같은 경우가 발생할 수 있습니다. 변수는 함수의 인수 내에서 인식되지 않습니다. 다음 시나리오를 고려하십시오.

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

리터럴 값 50px를 사용하면 예상한 결과가 생성되지만 $body_padding 변수로 전환하면 calc() 함수 내에서 변수를 유지하는 출력이 생성됩니다.

이 문제를 해결하고 적절한 변수 해석을 보장하려면 다음을 사용하여 calc() 함수 내에서 변수를 보간하는 것이 좋습니다. 구문:

body
    height: calc(100% - #{$body_padding})

특히 이 사용 사례에 대해 실행 가능한 또 다른 옵션은 border-box 속성을 활용하는 것입니다.

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

border-box를 사용하면 높이 속성이 패딩을 사용하면 calc() 함수 내에서 사용자 정의 계산이 필요하지 않게 됩니다.

위 내용은 Sass가 `calc()` 함수 내부의 변수를 해결하지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!