Sass는 퍼센트 빼기 px를 계산합니다

다음을 수행하고 싶습니다.

height: 25% - 5px;

분명히 그렇게하면 오류가 발생합니다.

Incompatible units: 'px' and '%'.

Sass는 한 단위에서 다음 단위로 변환 할 수없는 값에 대해서는 산술을 수행 할 수 없습니다. Sass는 픽셀이나 다른 단위로 "100 %"의 폭을 정확히 알 수있는 방법이 없습니다. 브라우저 만 아는 것입니다.

calc()대신 사용해야 합니다. 사용할 수있는 브라우저 호환성 확인 ...

.foo {
    height: calc(25% - 5px);
}

값이 변수에 있으면 보간을 사용하여 문자열로 변환해야 할 수도 있습니다 (그렇지 않으면 Sass는 산술을 시도합니다).

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

calcSCSS [compile-time] 및 CSS [run-time] 모두에 기능 이 있습니다 . 당신은 후자 대신 전자를 호출했을 것입니다.

명백한 이유로 믹싱 유닛은 컴파일 타임에는 작동하지 않지만 런타임에는 작동합니다.

unquoteSCSS 함수 인 을 사용하여 후자를 강제 실행할 수 있습니다 .

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

컨테이너의 너비를 알고 있다면 다음과 같이 할 수 있습니다.

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

많은 경우 # 컨테이너의 너비가 상대적 일 수 있음을 알고 있습니다. 그런 다음 작동하지 않습니다.

낡은 실을 되살려 서 죄송합니다. : after pseudo-selector를 사용하여 나침반을 늘릴 수 있습니다. div가 화면의 왼쪽에서 (50 % + 10px)까지 너비를 채우려면 (SAS 들여 쓰기 구문)을 사용할 수 있습니다.

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

: after 요소는 .example 오른쪽에 50 %를 채우고 (예 : 너비에 50 %를 사용할 수 있음) .example은 해당 너비에 10px를 더한 값으로 늘어납니다.

백분율 값을 변수에 추가하고 #{$variable} 예를 들어 사용하십시오.

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}