CSS calc（）函数中的Sass变量

css CSS

西里神无Pro

2020-03-13

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

第1553篇《CSS calc（）函数中的Sass变量》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
樱阿飞 2020.03.13

这是一个使用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/

西门十三LEY 2020.03.13

尝试这个：

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

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}
神奇Tony古一 2020.03.13

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

GilTom神乐 2020.03.13

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

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

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

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

Mandy神奇 2020.03.13

插值：

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

在这种情况下，边界框也足够了：

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding
Pro路易 2020.03.13

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

HTML：

<div></div>

SCSS：

$a: 4em;

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android