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

Posted by Scott Hurst
Scott Hurst
9,208 Points

Undefined variable

I have this function that is supposed to calculate the background-position on a sprite image. When I run gulp, it errors out and says $x-shift is an undefined variable on the @return line. What am I missing?

@function sprite-location($x_pos, $y_pos, $spriteCols, $spriteRows){

@if($spriteCols>1) {
$x-shift: 100% * ($x_pos / ($spriteCols - 1));
} @else {
    $x-shift: 0%;
}

@if($spriteRows>1) {
    $y-shift: 100% * ($y_pos / ($spriteRows - 1));
} @else {
    $y-shift: 0%;
}

@return $x-shift $y-shift; }

1 Answer

Máté Végh
Máté Végh
25,607 Points

Hey Scott,

How about nulling your variables? Let me show you what I mean:

@function sprite-location( $x_pos, $y_pos, $spriteCols, $spriteRows ) {
  $x-shift: null;
  @if( $spriteCols > 1 ) {
    $x-shift: 100% * ( $x_pos / ( $spriteCols - 1 ) );
  } @else {
    $x-shift: 0%;
  }

  $y-shift: null;
  @if( $spriteRows > 1 ) {
    $y-shift: 100% * ( $y_pos / ( $spriteRows - 1 ) );
  } @else {
    $y-shift: 0%;
  }

  @return $x-shift $y-shift;
}

So for example this:

.foo {
  background-position: sprite-location( 2, 4, 6, 6 );
}

Will output this:

.foo {
  background-position: 40% 80%;
}

I have no idea why it says undefined variable, but I think this solves the problem.

Scott Hurst
Scott Hurst
9,208 Points

That seems to have fixed it. Thanks!