CSS calc()函数中的Sass变量


1343

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


10
混合中Usa变量的
cimmanon

19
@ user3705055您确实需要计算,因为Sass无法计算100%-50px,因为单位不同。只有知道容器的大小才能在添加值之前将100%转换为px时,浏览器才能计算出该值。这就是calc存在的确切原因。
Mog0

Answers:


2536

插值

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

对于这种情况,border-box也足够了:

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

3
box-sizing: border-box;我认为,这当然是理想的选择。通常,盒子大小模型应使t
Brandito

非常感谢!我正打算与calc(100% - var(--body_padding))
锡拉(Sylar)

51

$variables在您calc()的height属性内使用:

HTML:

<div></div>

SCSS:

$a: 4em;

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

11
这将近5年前为公认的答案增加了什么?
random_user_name

6
由于某种原因,我发现此答案更加清晰。我没有做很多的scss工作,所以这很“简单”,让我更容易理解。
2b77bee6-5445-4c77-b1eb-4df3e5

4
绝对比接受的答案更清楚。“插值:”对我而言毫无意义。
雅克·马修

3
@JacquesMathieu sass-lang.com/documentation/interpolation- 如果这对您没有任何意义,并且答案是很多,则可能您应该了解这些大惊小怪。只是我的两分钱...
A. Chiesa

1
@一个。基耶萨肯定,这定义了插值。但是,OP和我不知道SASS中的插值,否则将永远不会问这个问题。因此,只说一个人可能会在没有定义或任何假装的情况下从未听说过,这无助于创建一个全面的答案。该链接当然有帮助。在接受的答案上看到这一点真是太好了。
雅克·马修

9

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

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

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

花了我一些时间来解决这个问题。


2

我已经尝试过了,然后就解决了我的问题。它将按照给定的速率(基本大小/速率大小)自动计算所有媒体断点


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

0

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

/* 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-originrotate()skew()

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


-2

你可以用你的口头表达 #{your verbal}


3
这似乎是一个奇怪的答案。我假设您的意思是,variable但鉴于OP知道变量是什么(它们$body_padding在代码中指定),您的答案还会添加什么?
Mike Poole

我给出了答案
Girraj

-6

尝试这个:

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

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

3
这比上面接受的答案好吗?它似乎甚至没有做同样的事情...?
朱尔斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.