CSS calc() 함수의 Sass 변수

질문자 :GJK

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 함수 내에서 변수를 대체해야 함을 인식하도록 하려면 어떻게 해야 합니까?

보간 :

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

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

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

sam

height 속성의 calc() 내에서 $variables 를 사용하려면:

HTML:

 <div></div>

SCSS:

 $a: 4em; div { height: calc(#{$a} + 7px); background: #e53b2c; }

DA SILVA MARLY Joao

비록 직접적인 관련은 없지만. 하지만 공백을 제대로 입력하지 않으면 CALC 코드가 작동하지 않는다는 것을 알았습니다.

그래서 이것은 나를 위해 작동하지 않았습니다 calc(#{$a}+7px)

그러나 이것은 calc(#{$a} + 7px)

이것을 알아내는 데 시간이 걸렸습니다.

Udit

나는 이것을 시도한 다음 내 문제를 해결했습니다. 지정된 비율(base-size/rate-size)에 따라 모든 미디어 중단점을 자동으로 계산합니다.

 $base-size: 16; $rate-size-xl: 24; // set default size for all cases; :root { --size: #{$base-size}; } // if it's smaller then LG it will set size rate to 16/16; // example: if size set to 14px, it will be 14px * 16 / 16 = 14px @include media-breakpoint-down(lg) { :root { --size: #{$base-size}; } } // if it is bigger then XL it will set size rate to 24/16; // example: if size set to 14px, it will be 14px * 24 / 16 = 21px @include media-breakpoint-up(xl) { :root { --size: #{$rate-size-xl}; } } @function size($px) { @return calc(#{$px} / $base-size * var(--size)); } div { font-size: size(14px); width: size(150px); }

Serkan KONAKCI

다음은 SASS/SCSS와 수학 공식 스타일을 사용하는 매우 간단한 솔루션입니다.

 /* frame circle */ .container { position: relative; border-radius: 50%; background-color: white; overflow: hidden; width: 400px; height: 400px; } /* circle sectors */ .menu-frame-sector { position: absolute; width: 50%; height: 50%; z-index: 10000; transform-origin: 100% 100%; } $sector_count: 8; $sector_width: 360deg / $sector_count; .sec0 { transform: rotate(0 * $sector_width) skew($sector_width); background-color: red; } .sec1 { transform: rotate(1 * $sector_width) skew($sector_width); background-color: blue; } .sec2 { transform: rotate(2 * $sector_width) skew($sector_width); background-color: red; } .sec3 { transform: rotate(3 * $sector_width) skew($sector_width); background-color: blue; } .sec4 { transform: rotate(4 * $sector_width) skew($sector_width); background-color: red; } .sec5 { transform: rotate(5 * $sector_width) skew($sector_width); background-color: blue; } .sec6 { transform: rotate(6 * $sector_width) skew($sector_width); background-color: red; } .sec7 { transform: rotate(7 * $sector_width) skew($sector_width); background-color: blue; }

transform-origin , rotate() 및 skew() 를 이해하는 것이 좋습니다.

https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

Carl L.D.

당신은 당신의 구두 #{your verbal}

Girraj

이 시도:

 @mixin heightBox($body_padding){ height: calc(100% - $body_padding); } body{ @include heightBox(100% - 25%); box-sizing: border-box padding:10px; }

Mas Hary

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