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 Sass Basics (retired) Speeding up Workflow with Sass Sass Functions

David Service
David Service
12,928 Points
Posted by David Service
David Service
12,928 Points

Where did the "$value" variable come from?

At about 6:20 in the video, Hampton uses the following function:

@function pxify($value) {@return unquote($value + "px")}

to replace this longer function in the Sass code:

.red {width: unquote(red($colour) + “px”);}

My question is, where did the "$value" variable come from? I don't see it defined at the top of the Sass sheet; is it a pre-defined variable in Sass?

Any help is appreciated.

David

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi David,

In all programs languages anything defined within a function between the parenthesis are called parameters, these are similar to variables with the difference that they're scoped to only the function therefore you can't use it anywhere apart from within your pxify function.

For example.

@function pxify($value) {
  @debug $value; // Results in something other than null
  @return unquote($value + "px");
}

@debug $value; // Results in null as the variable isn't defined

Hope that helps.

David Service
David Service
12,928 Points
David Service
David Service
12,928 Points

Hi Chris,

You'll have to forgive my ignorance if some of my follow-up questions are a bit off-point; I've come through the Web Design track first, and don't have any experience with programming yet.

From what I gather from your answer, the use of "$value" is just an arbitrary name (for instance, we could name it something else like "$result" or "$outcome" and it would still be fine), that stands for the result of the function

(red($color))

So, we're telling Sass that we want to perform the "pxify" function on that arbitrary name that stands in for the result of the above function?

Thanks again for helping out,

David

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

You'll have to forgive my ignorance if some of my follow-up questions are a bit off-point; I've come through the Web Design track first, and don't have any experience with programming yet.

I would highly recommend you watch the Introduction to Programming course videos as the same principles apply, even though it's based around JavaScript the same concepts mostly apply between the two.

From what I gather from your answer, the use of "$value" is just an arbitrary name (for instance, we could name it something else like "$result" or "$outcome" and it would still be fine), that stands for the result of the function

Yes, the parameter(s) name we set in the function can literally be called anything, if we wanted it to be called $thisIsAParameterContainingAUniqueValue we could, but that would be absurd and pretty confusing to another developer.

So, we're telling Sass that we want to perform the "pxify" function on that arbitrary name that stands in for the result of the above function?

Not really, essentially we're doing the following.

  1. We call the function pxify along with an argument which is an integer and is unitless

  2. the function assigns the value of the argument we've given it to the parameter $value

  3. the parameter $value is now scoped to the pxify function and we can use it freely

  4. in our @return statement we use the $value parameter within the unquote function to add a pixel unit to it.

The result of the function always comes from the @return statement, the arguments we supply to the function are only considered to be parameters with usable data for that given function call.

Hope that makes sense.

David Service
David Service
12,928 Points
David Service
David Service
12,928 Points

Hi Chris,

I think it's starting to make sense for me, and yes I'll absolutely be checking out the Intro to Programming course as soon as I'm finished with Web Design.

Thanks again for taking the time to spell it out for me.

David

rosinapissaco
rosinapissaco
13,401 Points
rosinapissaco
rosinapissaco
13,401 Points

Hi!

I think this it is not very useful, this video is showing something like a simple game.

Look at my code: http://codepen.io/rosinaaa/pen/BoZaVQ

If you change the pink color value for another color the width of red, blue, green boxes will change according with how much red, blue and green the new color has now. This is what I understand. I hope this help you!

By the way, functions in sass and in general are very useful