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 Advanced Sass Advanced Functions Introspection: Part 2

Posted by Josh Flowers
Josh Flowers
7,010 Points

Not sure why my comparison is failing

I've been stuck on this for the last hour. I'm not really sure why this is failing.

I've tried a lot of approaches, so the attached code just happens to be my latest attempt. One of my other attempts could have been closer to the correct answer, but I'm only pasting this attempt to keep things brief.

Any help would be greatly appreciated.

Cheers!

style.scss 
$ems: 2em;
$pixels: 5px;
$percents: 25%;
$inches: 1in;

@function add-if-comparable($alpha, $bravo) {
  /* Add your code here! */
  @if comparable($alpha, $bravo) {
   .block{
      content: $alpha + $bravo;
      font-size:$alpha + $bravo;
    }
  } @else {
    .block{
      content: 'error';
      font-size:'error';
    }
  }
}

.block {
  display: block;
  background-color: orange;
  font-size: add-if-comparable($ems, $ems);
  content: add-if-comparable($pixels, $percents);
}

3 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Josh,

You're last example is well overkill for what the actual task is which is:

We've set up a series of variables and a CSS rule for you. Complete the add-if-comparable function so that it adds its $alpha and $bravo arguments together and returns the value if they are comparable. If $alpha and $bravo aren't comparable, add-if-comparable should return the string 'error'.

@function add-if-comparable($alpha, $bravo) {
  @if comparable($alpha, $bravo) {
    @return $alpha + $bravo;
  }

  @return 'error';
}

So in the above so all we're doing is comparing $alpha and $bravo and if they have a type that matches we add them together and return the value otherwise we return error.

Hope that helps.

Abraham Juliot
Abraham Juliot
47,353 Points

I think including @else instead of a default @return statement is more readable. just my thought though.

Josh Flowers
Josh Flowers
7,010 Points
Josh Flowers
Josh Flowers
7,010 Points

Yeah, I thought it was overkill, too! I originally had what you just posted with one exception:

I put an "else".

@function add-if-comparable($alpha, $bravo) {
  @if comparable($alpha, $bravo) {
    @return $alpha + $bravo;
  } @else{
      @return 'error';
    }  
}

It seems to me that an @else is needed because this is a conditional.

Anyway, that's for the help. If only I would have removed the @else earlier, I wouldn't have resorted to these wildly over-complication solutions.

Cheers!

Chris Shaw
Chris Shaw
26,676 Points

No worries.

It seems to me that an @else is needed because this is a conditional.

Because we're using an @return statement the @else condition isn't required as execution within the @function will stop rather than continuing on and parsing our second @return statement for 'error'.

Josh Flowers
Josh Flowers
7,010 Points
Josh Flowers
Josh Flowers
7,010 Points

Ah, that's good to know. Thanks again.