CSS calc () 함수의 Sass 변수


1343

calc()Sass 스타일 시트에서 함수 를 사용하려고하는데 몇 가지 문제가 있습니다. 내 코드는 다음과 같습니다.

$body_padding: 50px

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

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

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

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



19
@ user3705055 단위가 다르므로 Sass에서 100 %-50px를 계산할 수 없으므로 계산이 필요합니다. 값을 추가하기 전에 컨테이너가 100 %로 변환하기 위해 컨테이너가 얼마나 큰지 알면 브라우저에서만 계산할 수 있습니다. 이것이 calc가 존재하는 정확한 이유입니다.
Mog0

답변:


2541

보간 :

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

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

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

3
box-sizing: border-box;물론 제 생각에는 이상적인 방법 일 것입니다. 일반적으로 상자 크기 조정 모델은 t
Brandito

많은 감사합니다! 나는과 CSS의 경로를 이동하고 있었다calc(100% - var(--body_padding))
사일러

51

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

HTML :

<div></div>

SCSS :

$a: 4em;

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

11
이것은 거의 5 년 전의 답변에 무엇이 추가됩니까?
random_user_name

6
어떤 이유로, 나는이 대답이 더 명확하다는 것을 알았습니다. 나는 많은 scss 작업을하지 않기 때문에 이것은 "일반적"이며 이해하기 쉽습니다.
2b77bee6-5445-4c77-b1eb-4df3e5 19

4
이것은 분명히 허용 된 것보다 명확한 대답입니다. '보간 :'은 나에게 아무 의미가 없습니다.
Jacques Mathieu

3
@JacquesMathieu sass-lang.com/documentation/interpolation- 그것이 당신에게 아무런 의미가없고 많은 표를 얻은 답변이라면, 소란이 무엇인지 이해해야 할 것입니다. 그냥 내 두 센트 ...
A. Chiesa

1
@ㅏ. Chiesa는 이것이 보간을 정의합니다. 그러나 OP와 나는 SASS에서 보간을 알지 못했습니다. 그렇지 않으면이 질문은 결코 요청되지 않았을 것입니다. 따라서 정의 없이는 전혀 들어 본 적이없는 단어를 말하거나 모든 가식이 모든 것을 포함한 답을 만드는 데 도움이되지 않습니다. 그 링크는 확실히 도움이됩니다. 허용 된 답변에서 그것을 보게되어 기뻤습니다.
Jacques Mathieu

9

직접 관련이 없지만. 그러나 공백을 올바르게 넣지 않으면 CALC 코드가 작동하지 않는다는 것을 알았습니다.

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

그러나 이것은 효과가 있었다 calc(#{$a} + 7px)

이것을 알아 내기 위해 언젠가 나에게 데려 갔다.


2

나는 이것을 시도하고 내 문제를 해결했다. 주어진 속도 (기본 크기 / 속도 크기)에 따라 모든 미디어 중단 점을 자동으로 계산합니다.


$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);
}

0

다음은 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/


-2

당신은 당신의 언어를 사용할 수 있습니다 #{your verbal}


3
이것은 이상한 대답처럼 보입니다. 나는 당신이 의미한다고 생각 variable하지만 OP는 변수가 무엇인지 알고 있습니다 ( $body_padding코드에 지정 되어 있음).
Mike Poole

답변을드립니다
Girraj

-6

이 시도:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

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

3
위의 허용되는 답변보다 이것이 더 낫습니까? 심지어 같은 일을하지 않는 것 같습니다 ...?
Jules
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.