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 stevencooper
stevencooper
5,755 Points

Sass & refactoring - I don't get it.

I'm kinda lost in this Sass module. The challenge says, "Use the double function you just wrote to refactor this code: div { font-size: 5px * 2; }"

The double function code is:

@function double($input) {
         @return $input * 2
}

I've gone over the video several times, and tried reading some Sass documentation online, and am even more lost & frustrated than I was to begin with. I don't even know where to begin.

Help! Anyone?

Thanks

2 Answers

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

I too have struggled in recent months. Sass brings a whole layer to CSS I never thought was out there. It's like a programming language for the design world. :)

I've just finished the Advanced Sass course which was very gruelling indeed but teaches you some great Sass concepts.

@function double($input) {
         @return $input * 2
}

Now this is a Sass function which is basically a block of code that does something.

It takes a parameter which is a variable $input that is a placeholder for a value.

@return is a directive that holds a calculated value.

To give it the value to multiply you just need to pass it in by calling the function .

double(5)

Which should output 10. Hope this helps :)

stevencooper
stevencooper
5,755 Points
stevencooper
stevencooper
5,755 Points

I'm still lost. Where does the 

div {
   font-size: 5px *2
}

fit in?

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

I'm sorry if I didn't explain that well enough. :)

Basically this function 

@function double($input) {
         @return $input * 2
}

Use a placeholder variable as a paremeter. Its waiting for a value to be passed into that variable later on. So later on give it a "call". A function call that passes in the value for $input

div {
  font-size: (double(5px));
}

which would output

div {
  font-size: 10px;
}

Hope this helps. :-)

stevencooper
stevencooper
5,755 Points

this is in response to your suggestion below. You were replying in the comment instead so i can't put this comment below yours.

Anyway, when i write the code as: 

@function double($input) {
  @return $input * 2; }
div {(font-size: (double(5px));}

I get the this error message:

Bummer! There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after "...: (double(5px))": expected "{", was ";}"

I don't understand the error message or where I am going wrong. Further help please?

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

It's because you have too many parentheses around your function call.

the syntax you need is selector { property: {(functionCall(value);}

If you put this code it will pass.

@function double($input) {
  @return $input * 2; }
div {font-size: (double(5px));}

Don't worry about not understanding the error message. This will come with practice. Typically in programming when an error message quotes a line number, it's because there's a problem with a line of code above it.