Biến Sass trong hàm CSS calc ()

Tôi đang cố gắng sử dụng calc()chức năng trong biểu định kiểu Sass, nhưng tôi gặp một số vấn đề. Đây là mã của tôi:

$body_padding: 50px

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

Nếu tôi sử dụng nghĩa đen 50pxthay vì body_paddingbiến của tôi , tôi sẽ nhận được chính xác những gì tôi muốn. Tuy nhiên, khi tôi chuyển sang biến, đây là đầu ra:

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

Làm cách nào để Sass nhận ra rằng nó cần thay thế biến trong calchàm?

Nội suy :

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

Trong trường hợp này, hộp viền cũng đủ:

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

Để sử dụng $variablesbên trong calc()tài sản chiều cao của bạn :

HTML:

<div></div>

SCSS:

$a: 4em;

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

Mặc dù nó không liên quan trực tiếp. Nhưng tôi thấy rằng mã CALC sẽ không hoạt động nếu bạn không đặt dấu cách đúng cách.

Vì vậy, điều này đã không làm việc cho tôi calc(#{$a}+7px)

Nhưng điều này đã làm việc calc(#{$a} + 7px)

Đã cho tôi đôi khi để tìm ra điều này.

Tôi đã thử điều này sau đó tôi đã khắc phục vấn đề của tôi. Nó sẽ tự động tính toán tất cả các điểm dừng phương tiện theo tỷ lệ nhất định (kích thước cơ sở / tỷ lệ kích thước)

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

Đây là một giải pháp thực sự đơn giản sử dụng SASS / SCSS và kiểu công thức toán học:

/* 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; }

Để kết luận, tôi đề nghị bạn nên hiểu transform-origin, rotate()và skew():

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

bạn có thể sử dụng lời nói của bạn #{your verbal}

Thử cái này:

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

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