在SASS的循环中使用@include？

Question

我试图创建24条灰线，以显示我的网格蓝图。这是图像（除了假装有24条灰线）。这是CodePen。

是否可以为@include grid(1);创建一个循环，以便它会重复24次以反映下面的图像？

HTML：

<div id="hi" class="section">
    <div class="grid-lines">
    <div class="section-header">
        <h1>Grid</h1>
    </div>
   </div>
</div>

SASS：

  #hi {
    width: 960px;
      @for $i from 0 through 24 {
      .grid-lines { 
        @include grid(1); }
      }
    background: #ccc;
    height: 500px;   
  }

Answer 1

当你@include一个SASS mixin时，你基本上只是粘贴了一些CSS属性。在这种情况下：

 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
 width: $columns*30px + ($columns - 1)*10px;

如果您在CSS文件中执行此操作24次，则只需覆盖相同的属性24次，而不是向页面添加任何内容（标记）。

您可以做的是创建一次网格线类，然后在标记中使用它24次：

SASS

.grid-line { 
  @include grid(1);
}

HTML

<div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
    <div class="grid-line"></div>
</div>