CSS calc（）函数中的Sass变量


本文翻译自：Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. 我正在尝试在Sass样式表中使用calc()函数，但是遇到了一些问题。 Here's my code: 这是我的代码：

1
2
3
4
5
$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. 如果我使用文字50px而不是我的body_padding变量，那么我得到的正是我想要的。 However, when I switch to the variable, this is the output: 但是，当我切换到变量时，这是输出：

1
2
3
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? 如何让Sass认识到它需要替换calc函数中的变量？

#1楼

参考：https://stackoom.com/question/1DRy3/CSS-calc-函数中的Sass变量

#2楼

Interpolate : 插值 ：

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

For this case, border-box would also suffice: 对于这种情况， border-box也足够了：

1
2
3
4
body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

#3楼

Try this: 尝试这个：

1
2
3
4
5
6
7
8
9
@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

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

#4楼

To use $variables inside your calc() of the height property: 要在height属性的calc()中使用$variables ：

HTML: HTML：

1
<div></div>

SCSS: SCSS：

1
2
3
4
5
6
$a: 4em;

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

#5楼

Here is a really simple solution using SASS/SCSS and a math formula style: 这是一个使用SASS / SCSS和数学公式样式的非常简单的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* 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; }

To conclude, I strongly suggest you to understand transform-origin , rotate() and skew() : 最后，我强烈建议您了解transform-origin ， rotate()和skew() ：

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

#6楼

I have tried this then i fixed my issue. 我已经尝试过，然后解决了问题。 It will calculate all media-breakpoint automatically by given rate (base-size/rate-size) 它将根据给定的速率（基本大小/速率大小）自动计算所有媒体断点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$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);
}