First, use a @for directive to write a loop that iterates through each column defined in the $cols variable, starting fr

Question

First, use a @for directive to write a loop that iterates through each column defined in the $cols variable, starting from 1.

Can someone help me

style.scss

div {
  background-color: green;
}

$cols    : 10;
$width   : 50px;
$gutter  : 15px;
$context : ($width * $cols) + ($gutter * ($cols - 1));

@for $i from 1 through 8 {
    $width: percentage{1 / $i}
}
}
    .col-#{$i} {
        width: $width;
    }
}

Answer 1 · 2016-10-11T07:20:19Z

October 11, 2016 7:20am

Hi Michael,

I don't like giving the complete answer that people can cut and paste and not learn anything, but I will go through each step to explain it and break it down. Hopefully this helps you understand.

The first step says to loop from 1 to $cols.

@for $i from 1 through $cols {
}

The second step to define '.grid__col--' with $i. This requires wrapping in #{}

@for $i from 1 through $cols {
  .grid__col--#{$i} {
  }
}

The third step requires you to define a '$target' variable and you then copy and paste from the question. Then you apply to the width a percentage of the two:

@for $i from 1 through $cols {
  .grid__col--#{$i} {
    $target: ($width * $i) + ($gutter * ($i - 1));
    width: percentage($target / $context)
  }
}

Note: I found the same page you did on google, but was able to jimmy it together for this result. Hope this is gives you a help in future challenges.

Welcome to the Treehouse Community

Looking to learn something new?

Michael Moba

Michael Moba

First, use a @for directive to write a loop that iterates through each column defined in the $cols variable, starting fr

1 Answer

Damien Watson

Damien Watson

Michael Moba

Michael Moba

Damien Watson

Damien Watson

Andres Ramirez

Andres Ramirez

Matthew McQuain

Matthew McQuain