Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Sass Grid System Sass Grid System Challenge

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Challenge Question: Outputting width of columns as a percentage using Sass

Ah well... I got through the first 2 challenges, I couldn't quite get the hattrick :)

I need to find the code that outputs column widths as a percentage. My asssumption for now is that I add

$target  : ($width * $i) + ($gutter * ($i - 1));

to the list of variables and then inside the interprolation syntax I simply have 

percentage($target/$context)

As per my code below but it's not passing. Anyone got any tips where I'm going wrong? Thanks. :)

style.scss 
div {
  background-color: green;
}

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


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

   }
}

1 Answer

Ali M Malik
Ali M Malik
33,293 Points

You're on the right track missing a step. So the $i variable if part of the loop. so assigning the target should be in it. But also you forgot to use the percentage function to assign the widths.

This is my code that passed the challenge: 

div {
  background-color: green;
}

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


@for $i from 1 through $cols {
$target : ($width * $i) + ($gutter * ($i - 1));

   .grid__col--#{$i} {
      width: percentage($target / $context);
   }
}

hope this helps

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi, Ali, yes I got through it in the end thanks.

I think I got it wrong by putting the $target variable in global scope instead of inside the loop

I got the percentage function in there too but didn't know how to assign it, til now. ;) Thanks for your help!!