html - 在 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>