CSS calc（）函数中的Sass变量

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

$body_padding: 50px
bodypadding-top: $body_paddingheight: calc(100% - $body_padding)

如果我使用文字50px而不是我的body_padding变量，我会得到我想要的。然而，当我切换到变量时，这是输出：

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

如何让Sass认识到它需要替换calc函数中的变量？

657192 次浏览
小开
最佳答案

插值：

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

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

bodybox-sizing: border-boxheight: 100%padding-top: $body_padding
小开

试试这个：

@mixin heightBox($body_padding){height: calc(100% - $body_padding);}
body{@include heightBox(100% - 25%);box-sizing: border-boxpadding:10px;}
小开

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

超文本标记语言：

<div></div>

SCSS：

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

这是一个使用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-origin、rotate()和skew()：

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

小开

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

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

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

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

calc(#{$a} + 7px)成功了

我花了些时间才弄明白。


提交答案