Sass calc decleration掉落Chrome

Question

我正在使用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); }

Answer 1

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

而且，由于您的表达式包含简单的数学运算-它可以由Sass自己计算。 此外，从表达式中看起来，您希望结果值是容器宽度的percentage() ，在这种情况下，您可以使用Sass中的percent 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玩这个例子。

Answer 2

遵循@Flying的建议，我能够实现所需的逻辑。 该代码更易于理解和调试。

目标：拥有一个1280像素的网格系统，容器的边距为20px，网格的边距为20px。 请注意，这些边距和填充属性仅适用于左侧和右侧（每侧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%;
}

Sass calc decleration掉落Chrome

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-12-16 12:10:36

解决方案2
0 2017-12-16 23:29:26

Sass calc decleration掉落Chrome

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-12-16 12:10:36

解决方案2 0 2017-12-16 23:29:26

解决方案1
1 已采纳 2017-12-16 12:10:36

解决方案2
0 2017-12-16 23:29:26