Sass calc decleration 放弃了 Chrome答案

【问题标题】：Sass calc decleration dropped ChromeSass calc decleration 放弃了 Chrome
【发布时间】：2018-05-30 03:30:09
【问题描述】：

我正在使用 Sass 编写一个简单的网格布局。我正在尝试使用calc() 来确定相对单位% 的宽度。为了测试样式，我使用了一个简单的 HTML 文件。

问题：在 Chrome 上使用开发工具检查结果，它显示带有 calc() 调用的宽度声明被丢弃为 Invalid property value。代码如下：

src.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="X-UA Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./../css/12grid_rwd.css">
    </head>
    <body>
        <main class="grid_1" role="main">
            <!--<header class="grid_12" role="banner">Header</header>
            <nav class="grid_3" role="navigation">Nav</nav>
            <section class="grid_9">Content</section>
            <footer class="grid_12" role="contentinfo">Footer</footer> -->
        </main>
    </body>
</html>

src.scss

$context-width: 1200;
// Grid >> 12 Columns
.grid {
    &_1 { width: calc(calc(80/#{$context-width})*100); }
}

生成的css：

.grid_1 {
  width: calc(calc(80/1200)*100); }

【问题讨论】：

标签： sass css-calc

【解决方案1】：

calc() 调用不能嵌套，它需要表达式来计算，这就是你的属性被浏览器丢弃的原因。

此外，由于您的表达式包含简单的数学 - 它可以由 Sass 本身计算。此外，从您的表达式看来，您希望结果值是容器宽度的百分比，在这种情况下，您可以使用 Sass 中的 percentage() 函数：

$context-width: 1200;
$column-width: 80;
// Grid >> 12 Columns
.grid {
  @for $n from 1 through 12 {
    &_#{$n} { 
      width: percentage($column-width * $n/$context-width); 
    }
  }
}

您可以在Sassmeister 使用此示例。

【讨论】：

非常感谢。它使代码变得如此简单。我正在添加完整的 sn-p 作为答案。

【解决方案2】：

按照@Flying 的建议，我能够实现我想要的逻辑。代码更易于理解和调试。

目标：拥有一个 1280 像素的网格系统，容器上的边距为 20 像素，网格上的内边距为 20 像素。请注意，这些边距和填充属性仅适用于左右（每边 10 像素）。从第一个网格开始，grid_1 类，80px，grid_2 将是80*2 + 20*(2-1)，其中80 is the fixed column width, 2 is the grid number, 20 is the padding 等等。 scss代码如下：

src.scss

$context-width: 1200;
$column-width: 80;
$fixed-gutter: 20;

// Grid >> 12 Columns

@mixin width-calc($n) {
  @if $n == 1{
    width: percentage(($column-width * $n)/$context-width);
  }
  @else {
    $c: $column-width * $n + ($fixed-gutter * ($n - 1));
    width: percentage(($c)/$context-width);
  }
}

.grid {
  @for $n from 1 through 12 {
    &_#{$n} {
      @include width-calc($n);
    }
  }
}

生成的css：

.grid_1 {
  width: 6.66667%;
}
.grid_2 {
  width: 15%;
}
.grid_3 {
  width: 23.33333%;
}
.grid_4 {
  width: 31.66667%;
}
.grid_5 {
  width: 40%;
}
.grid_6 {
  width: 48.33333%;
}
.grid_7 {
  width: 56.66667%;
}
.grid_8 {
  width: 65%;
}
.grid_9 {
  width: 73.33333%;
}
.grid_10 {
  width: 81.66667%;
}
.grid_11 {
  width: 90%;
}
.grid_12 {
  width: 98.33333%;
}

【讨论】：