Fatal编程技术网
  • sass/
  • Sass钙减容

Sass钙减容

sass

Sass钙减容,sass,css-calc,Sass,Css Calc,我正在使用Sass编写一个简单的网格布局。我试图使用calc（）来确定相对单位的宽度%。为了测试样式，我使用了一个简单的HTML文件 问题：在Chrome上使用dev工具检查结果时，它显示带有calc（）调用的宽度声明由于无效属性值而被丢弃。代码如下： src.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="X-

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

问题：在Chrome上使用dev工具检查结果时，它显示带有
calc（）
调用的宽度声明由于
无效属性值而被丢弃。代码如下：

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>


生成的css：


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



.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本身进行计算。此外，从表达式中可以看出，您希望结果值是容器宽度的百分比，在这种情况下，您可以使用Sass中的函数：


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



你可以在上玩这个例子。
根据@Flying的建议，我能够实现我想要的逻辑。代码更易于理解和调试

目标：拥有一个1280像素的网格系统，容器上有20px的边距，网格上有20px的填充。请注意，这些边距和填充属性仅适用于左侧和右侧（每侧10px）。从第一个网格开始，class
grid_1
，在80px处，
grid_2
将是
80*2+20*（2-1）
，其中
80是固定列宽，2是网格编号，20是填充，依此类推。scss代码如下所示：

src.scss


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



$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: calc(calc(80/1200)*100); }



.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%;
}



非常感谢。它使代码变得如此简单。我将添加完整的代码片段作为答案。