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 Generating Column Classes

Posted by mike white
mike white
Courses Plus Student 224 Points

Sass Grid System problem

$g-col-width: 65px;
$g-gutter-width: 30px;
$g-col-count: 12;
$g-cont-max-w: 1050px;

@function g-context($g-col-width, $g-col-count, $g-gutter-width) {
    $g-context: ($g-col-count * $g-col-count) + ($g-gutter-width * ($g-col-count -1));
    @return $g-context;
}

@for $i from 1 through $g-col-count {

    $context: g-context($g-col-width, $g-col-count, $g-gutter-width);
    $target: ($g-col-width * $i) + ($g-gutter-width * ($i - 1));

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

I have this code , when i try to compile it , i have this error : Undefined operation: "30px times 12 -1".

where am I doing wrong?

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

I don't know sass but maybe instead of ($g-gutter-width * ($g-col-count -1)) it should be ($g-gutter-width * ($g-col-count - 1))

1 Answer

Thiago de Bastos
Thiago de Bastos
14,556 Points
Thiago de Bastos
Thiago de Bastos
14,556 Points

Hi mike white ! Try the following!

$g-col-width    : 65px;
$g-gutter-width : 20px;
$g-col-count    : 12;
$g-cont-max-w   : 1050px;

@function g-context($g-col-width, $g-col-count, $g-gutter-width) {
   $g-context: ($g-col-width * $g-col-count) + ($g-gutter-width * ($g-col-count - 1));
   @return $g-context;
}

@for $i from 1 through $g-col-count {

  $context: g-context($g-col-width, $g-col-count, $g-gutter-width);
  $target: ($g-col-width * $i) + ($g-gutter-width * ($i - 1));

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

}
Thiago de Bastos
Thiago de Bastos
14,556 Points
Thiago de Bastos
Thiago de Bastos
14,556 Points

After looking through your code, it seems that Hugo Paz was right: 

// Your code
$target: ($g-col-width * $i) + ($g-gutter-width * ($i -1));
// Correct code
$target: ($g-col-width * $i) + ($g-gutter-width * ($i - 1));