CSS calc () 함수의 Sass 변수

 

질문 : CSS calc () 함수의 Sass 변수

---

calc() 함수를 사용하려고하는데 몇 가지 문제가 있습니다. 내 코드는 다음과 같습니다.

$body_padding: 50px

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

body_padding 변수 대신 50px 를 사용하면 원하는 것을 정확히 얻습니다. 그러나 변수로 전환하면 다음이 출력됩니다.

body {
    padding-top: 50px;
    height: calc(100% - $body_padding);
}

calc 함수 내에서 변수를 대체해야한다는 것을 Sass가 인식하도록하려면 어떻게해야합니까?

답변

---

보간 :

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

이 경우 border-box 도 충분합니다.

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

출처 : https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function