CSS calc() 함수의 Sass 변수

CSS calc() 함수의 Sass 변수

저는 그것을 사용하려고 합니다.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기능?

보간:

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

이 경우에는 테두리 상자로도 충분합니다.

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

사용하기$variables마음속에calc()높이 특성:

HTML:

<div></div>

SCSS:

$a: 4em;

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

직접적인 연관은 없지만요.하지만 공간을 제대로 넣지 않으면 CALC 코드가 작동하지 않습니다.

그래서 이것은 나에게 효과가 없었습니다.calc(#{$a}+7px)

하지만 이것은 효과가 있었습니다.calc(#{$a} + 7px)

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

저는 이것을 시도해 보고 문제를 해결했습니다.지정된 속도(기본 크기/속도 크기)에 따라 모든 미디어 중단점이 자동으로 계산됩니다.

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

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

사용해 보십시오.

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

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

언급URL : https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function