Sass变量在CSS calc（）函数 [英] Sass Variable in CSS calc() function

问题描述

我试图在Sass样式表中使用 calc（）函数，但我遇到了一些问题。这是我的代码：

  $ 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

$ p






$ b b

  height：calc（100％ - ＃{$ body_padding}）
  

对于这种情况，边框框也会足够：

  body 
 box-sizing：border-box 
 height：100％
 padding-top：$ body_padding 
  

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code:

$body_padding: 50px

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

If I use the literal 50px instead of my body_padding variable, I get exactly what I want. However, when I switch to the variable, this is the output:

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

How can I get Sass to recognize that it needs to replace the variable within the calc function?

解决方案

Interpolate:

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

For this case, border-box would also suffice:

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

这篇关于Sass变量在CSS calc（）函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！