如何使用 sass 创建“在网格的子元素和父元素上具有相等百分比边距的流体网格”？答案

【问题标题】：How to create "fluid grid with equal percentage margin on child & parent element of a grid" using sass?如何使用 sass 创建“在网格的子元素和父元素上具有相等百分比边距的流体网格”？
【发布时间】：2015-02-26 05:26:51
【问题描述】：

如何使用 sass 创建“在网格的子元素和父元素上具有相等百分比边距的流体网格”？检查下图.. http://i.stack.imgur.com/6rde8.png

我使用 sass 创建了一个流体网格。但是子列（灰色框）之间的差距与父元素不同。如何使用 sass 创建网格系统，其中子间隙等于父间隙（如第二张图所示）？？

更新 ===============
检查这个小提琴.. https://jsfiddle.net/huqozhqy/

红色框之间的间隙大于绿色框之间的间隙.. 我想要一个 SASS 混合或数学公式来生成一个网格，其中两个间隙相等且基于窗口调整大小流动..

HTML应该是这样的，没有多余的div..

<div style="overflow:hidden;">
  <div class="span-4">
    <div class="span-2">1</div>
    <div class="span-2">1</div>
  </div
</div>

【问题讨论】：

你需要给我们看一些代码。
这是一个纯 CSS 问题，与 Sass 无关。
您可以使用 display:inline-block 或 flex 与 text-align/justify-content 和 calc() 来设置宽度并避免边距codepen.io/gcyrillus/pen/pvVBRj codepen.io/gcyrillus/pen/QwrPKW
请检查更新
我在之前的评论中提出的 @PrajithSN 链接使用您声称的相同 html 结构。你的小提琴 jsfiddle.net/huqozhqy/3 通过 inline-block 和 text-align 方法，对于 flex，看看我的 codepen

标签： html css sass

【解决方案1】：

这是对 sass 的完美使用...您可以嵌套两个循环并让 sass 进行数学运算...

scss

$columns: 4;
$subcolumns: 6;
$margin : 3%; 

@for $i from 1 through $columns {
  .span-#{$i} {
    width: (100 / $i) * 1% - $margin*(($i - 1)/$i);
    margin-right:$margin;

      @for $j from 1 through $subcolumns {
        .span-#{$j} {
          width: (100 / $j) * 1% - $i*$margin*(($j - 1)/$j);
          margin-right:$margin*$i;
        }
      }//j-loop

  }//i-loop

}

.col{
  float:left;
  background-color:maroon;
  .col{
    background-color:red;
    margin-top:10px;
    & .col:last-child{
      margin-right:0px;
    }
  }
}


.row{ 
  background-color:#999999;
  .col:last-child{
  margin-right:0px;
  }
  &:after{
   clear:both;
   content:"";
   display:block;
  }
}

html

<div class="row">
<div class="col span-4">
      <div class="col span-2">2</div>
      <div class="col span-2">2</div>
</div>
<div class="col span-4">
      <div class="col span-2">2</div>
      <div class="col span-4">4</div>
      <div class="col span-4">4</div>
</div>

<div class="col span-2">
      <div class="col span-3">3</div>
      <div class="col span-6">6</div>
      <div class="col span-6">6</div>
      <div class="col span-3">3</div>
</div>

http://codepen.io/johanthuresson/pen/NPMmox?editors=110

【讨论】：

感谢您的努力。但是，间隙仍然不一样，尤其是在调整窗口大小时！