Question

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

Answer 1

内插：

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

对于这种情况，border-box也足够了：

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

Answer 2

要在height属性的$variables中使用calc()：

HTML

<div></div>

Scss

$a: 4em;

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

Answer 3

这是一个使用SASS / SCSS和数学公式样式的非常简单的解决方案：

interface address{
  district?,
  city?
}
class addressInfo implements address{
  constructor(
    public district?: string,
    public city?: string
) { }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  cf: FormGroup;
  isChecked:boolean;
  localAddress: address = new addressInfo();
  permanentAddress: address = new addressInfo();

  constructor(){
    this.isChecked = false;
  }
  checkValue(){
  //alert(this.isChecked);
     if(this.isChecked){
       this.permanentAddress = this.localAddress;
       console.log(this.permanentAddress);
     }
     else{
       this.permanentAddress = new addressInfo();
     }
    }

  }

最后，我强烈建议您了解/* 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()：

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

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

Answer 5

您可以使用口头#{your verbal}

Answer 6

即使它不直接相关。但是我发现如果您没有正确放置空格，CALC代码将无法正常工作。

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

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

花些时间找我解决这个问题。

Answer 7

试试这个：

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

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

CSS calc（）函数中的Sass变量

7 个答案: