CSS calc()函数中的Sass变量

Question

我正在尝试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函数中的变量？

Answer 1

插:

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

在这种情况下,边框也足够了:

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

Answer 2

尽管它没有直接关系。但是我发现如果您没有正确放置空格，CALC 代码将无法工作。

所以这对我不起作用 calc(#{$a}+7px)

但这有效 calc(#{$a} + 7px)

我花了一些时间才弄清楚这一点。

Answer 3

要$variables在你calc()的高度属性中使用:

HTML

<div></div>

SCSS

$a: 4em;

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

Answer 4

我试过这个然后我解决了我的问题。它将按给定的速率（基本大小/速率大小）自动计算所有媒体断点

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