Sass Functions

Hi, William Lyth:

When it comes to functions in Sass, like most languages , you have functions that accepts arguments. Arguments are alternatively called parameters.

Functions are referred by what they were called during the definition of them. In Sass, you explicitly define a function like this in .scss syntax :

// SCSS Syntax 
@function name_of_new_function($parameter_1) {
   // do what you wanted to do within this function in the first place 
   @return $output_of_this_function_you_want 
}

and in .sass syntax

// Sass syntax 
@function name_of_new_function($parameter_1) 
  // do what you wanted to do within this function in the first place 
   @return $output_of_this_function_you_want 

To have the function work (be executed or be invoked), you use a set of parentheses alongside the name of function. In this case, name_of_new_function(). However, this would be an error--we said name_of_new_function expects a parameter (in Sass you can define a default value, but for the sake of being simple, I'll ignoring taking that into consideration with this example).

So in this case, we need to pass in a parameter like this name_of_new_function(12). Depending on what your functions does inside of itself you should get a predictable output of a specific value and type with no problem.

For this problem, you have to execute a function called double. Like a function that was designed well, it's name indicated pretty well what it can do.

Like my example, double expects a parameter, which will be 5px in this case. This would replace what's currently there, 5px *2 (double(5px)).

Did all of that make sense to you, or was it in tl;dr; territory?