CODEWITHSUNDEEP
htmlcsssass
evan
evan

Reputation: 964

Using @include inside a loop in SASS?

I'm trying to create 24 grey lines, to show a blueprint of my grid. Here is the image (except pretend there are 24 grey lines). Here is the CodePen.

Is it possible to create a loop for @include grid(1); so it will repeat itself 24 times to mirror the image below?

enter image description here

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

Upvotes: 0

Views: 280

Answers (1)

nathan
nathan

Reputation: 512

When you @include a SASS mixin, you are basically just pasting in some CSS properties. In this case:

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

If you do this 24 times in your CSS file, you are just overwriting the same properties 24 times, not adding any more content (markup) to the page.

What you could do, is create your grid lines class once, and then use it 24 times in your markup:

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>

Upvotes: 2

Related Questions