CSS calc() 函数中的 Sass 变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17982111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sass Variable in CSS calc() function
提问by GJK
I'm trying to use the calc()function in a Sass stylesheet, but I'm having some issues. Here's my code:
我正在尝试calc()在 Sass 样式表中使用该函数，但遇到了一些问题。这是我的代码：
$body_padding: 50px
body
padding-top: $body_padding
height: calc(100% - $body_padding)
If I use the literal 50pxinstead of my body_paddingvariable, I get exactly what I want. However, when I switch to the variable, this is the output:
如果我使用文字50px而不是我的body_padding变量，我就会得到我想要的。但是，当我切换到变量时，这是输出：
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 calcfunction?
我怎样才能让 Sass 认识到它需要替换calc函数中的变量？
回答by sam
插值：
body
height: calc(100% - #{$body_padding})
For this case, border-boxwould also suffice:
对于这种情况，border-box也足够了：
body
box-sizing: border-box
height: 100%
padding-top: $body_padding
回答by Joao DA SILVA MARLY
To use $variablesinside your calc()of the height property:
要$variables在您calc()的 height 属性中使用：
HTML:
HTML：
<div></div>
SCSS:
社会保障：
$a: 4em;
div {
height: calc(#{$a} + 7px);
background: #e53b2c;
}
回答by Udit
Even though its not directly related. But I found that the CALC code won't work if you do not put spaces properly.
尽管它没有直接关系。但是我发现如果您没有正确放置空格，CALC 代码将无法工作。
So this did not work for me calc(#{$a}+7px)
所以这对我不起作用 calc(#{$a}+7px)
But this worked calc(#{$a} + 7px)
但这有效 calc(#{$a} + 7px)
Took me sometime to figure this out.
我花了一些时间才弄清楚这一点。
回答by Serkan KONAKCI
I have tried this then i fixed my issue. It will calculate all media-breakpoint automatically by given rate (base-size/rate-size)
我试过这个然后我解决了我的问题。它将按给定的速率（基本大小/速率大小）自动计算所有媒体断点
$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);
}
回答by Carl L.D.
Here is a really simple solution using SASS/SCSS and a math formula style:
这是一个使用 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; }
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/
回答by Girraj
you can use your verbal #{your verbal}
你可以用你的语言 #{your verbal}
回答by Mas Hary
Try this:
尝试这个：
@mixin heightBox($body_padding){
height: calc(100% - $body_padding);
}
body{
@include heightBox(100% - 25%);
box-sizing: border-box
padding:10px;
}
