SASS 캘크 보간

Question

나는 SASS 변수가 있습니다.

$ default-padding 변수의 값에 따라 다양한 계산을 할 수 있습니다. 예를 들어 너비는 100 % - (2 * $ default-padding)입니다. 왼쪽과 오른쪽에 여백이 있으므로

내가 (부르봉 왕가의 스트립 단위 방법을 사용하여) 로컬 변수 설정하려고 :

$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px; 

내가이 변수의 결과가이 유스 케이스에 30 픽셀하는 기대를, 나는 그것을 사용하려면 다음 규칙에 :

.popup { 
    width: calc(100% - #{$default-padding-left-and-right}); 
} 

이 작동하지 않는, 그 결과 CSS는 다음과 같습니다

.popup { 
    width: calc(100% - strip-unit(15px)px); 
} 

내가 뭘 잘못하고있어?

Answer 1

두 가지 해결해야한다 : 함수 이름이 인쇄 된 이유

는 지구 단위 기능처럼 보인다

1. 가 (발견되지 않습니다 out)
2. $ default-padding-left-and-right (변수 값을 문자열로 바꿈)을 삽입하면 안됩니다. 대신에 곱하기를 사용하십시오.

예 :

@function strip-unit($num) { @return $num/($num * 0 + 1); } 

$default-padding: 15px; 
$default-padding-left-and-right: strip-unit($default-padding) * 2px; 

.popup { 
    width: calc(100% - #{$default-padding-left-and-right}); 
} 

출력 :

이

.popup { 
    width: calc(100% - 30px); 
} 

Answer 2

부르봉 기능입니다 strip-units하지 strip-unit -이 변화하면 문제