Preview
Video Player
00:00
00:00
Custom Functions
6:22Besides providing a collection of built-in functions, Sass lets you write your own functions to reuse logic in your code.
Besides providing a collection
of built in functions.
0:00
Sass let's you write you own functions
to reuse logic in your code.
0:03
In programming, a function is a piece
of code that returns a result.
0:07
For example, in the last video I
introduced the lighten function
0:10
which creates or
returns a new color value.
0:14
Functions let you write code that
you can quickly use again and again.
0:17
Now Sass functions are similar to mixins,
0:20
because they both extract
repeating patterns from your code.
0:22
And instead of outputting style
decorations or rule sets like mixins do,
0:25
a function outputs a single value.
0:29
For example,
you could write Sass functions
0:31
to handle certain calculations
you repeat in your CSS.
0:34
Like calculating flexible column widths or
0:37
converting pixel values to ems or
rems and percentages.
0:39
Open the functions.scss partial,
located inside the utilities folder.
0:43
And let's create a simple function
that divides two numbers and
0:47
returns the result.
0:51
You define a function using
the function directive
0:53
followed by the name of the function.
0:56
We'll name the function divide then add a
set of parentheses followed by opening and
0:58
closing curly braces.
1:03
Inside the parentheses you define
the parameters of the function.
1:06
Parameters are values you
supply to the function so
1:10
that the function can do something
with those values like divide them.
1:13
To make a function reusable, you usually
define function parameters as variable.
1:16
So let's have divide accept two
parameters, the variables a and b.
1:21
Now if you're passing a function two or
1:27
more parameters you
separate them with commas.
1:28
Inside the curly braces,
you write the functions logic.
1:32
Every function uses the return
directive to return a value.
1:36
Inside the function, we'll add @return.
1:40
Then inside parens use
the division operator
1:43
to divide the value of the (a$ / b$);.
1:49
The biggest difference
between a function and
1:55
other Sass features, is that
a function does not output any CSS.
1:57
Instead, it returns a value that can
be used in your CSS declarations.
2:02
So here, divide is always going to
return the result of ($a / $b).
2:05
For example in the same file,
let's create a .test class selector.
2:11
Then, use divide to apply
a flexible unit list line-height.
2:18
So as the line-height value,
2:25
we'll type divide followed by a set
of parenthesis to call the function.
2:28
Then inside the parentheses,
pass it the two values to divide.
2:32
The values pass to a function when
being called are called arguments.
2:35
So let's pass divide,
the arguments 32px and 16px.
2:39
Let's save our changes and
over in the CSS output,
2:45
notice the function returns
a line-height value of 2.
2:50
Now, this simple function
isn't incredibly useful.
2:55
Because you could just write
the division operator as the value.
2:58
For example, the line-height value
can simply be 32px / 16px inside
3:02
a set of parens.
3:06
And as you can see this also
returns a line-height value of 2.
3:11
Sass functions save you
from doing tedious and
3:14
cumbersome calculations you find yourself
doing over and over again in your project.
3:17
For instance,
3:22
when converting pixel values to percentage
or m values, you'll use the trusted target
3:23
divided by context equals result formula
commonly used in responsive web design.
3:28
So let's delete the divide function and
3:33
write a small function that converts
pixel values to percentages.
3:35
So we'll type @function and
3:39
we'll call the function px-to-pc or
pixels to percentages.
3:42
We'll follow that by a set of parens and
a set of curly braces.
3:47
Now, the function is going to accept
the parameter's target and context.
3:51
You can simplify function calls by
assigning default values to parameters.
4:00
A parameter that's given a default value
is known as an optional parameter.
4:05
Because you can omit the argument for
that parameter when calling the function.
4:09
So let's give context a default value.
4:13
And most of the time,
4:16
the context in our project will
be the max width of 1000 pixels.
4:17
Functions can access any
globally defined variable, so
4:24
we'll set context default value
to the max width variable.
4:28
Then inside the function,
we'll write @return,
4:34
and inside the parens
($target / $context).
4:41
And to return a percentage value,
4:48
we'll multiply the result of
($target / $context) by 100%.
4:50
All right, so let's try it out.
4:56
Inside the text selector,
4:57
let's delete this line-height property and
5:00
add a width property and
we'll set the value to px-to-pc.
5:05
Now we've already assigned the context
parameter to a default value.
5:11
So we can pass the function
just one argument for
5:16
target, which is the pixel value you
want to convert to a percentage.
5:19
So let's pass px-to-pc the argument 400px.
5:23
So the function divides 400px by
the value of max width or 1000 pixels.
5:28
And over in the output CSS, you can
see that this returns the value 40%.
5:36
And you can overwrite the default
value given to context by passing
5:42
px-to-pc a second argument.
5:45
So for example,
we'll pass it 400px, 1200px.
5:48
So this divides 400 pixels by 1200 pixels.
5:55
And now the width value
changes to 33.33333%.
5:59
Now, it's best to keep functions simple.
6:03
Use them only when you need to calculate
a value that maybe reused somewhere else.
6:05
For example, you'd likely use this
function to display flexible columns and
6:09
margins in your response of layouts.
6:14
In the next video, you'll use this
function to create a new function for
6:16
building smarter flexible layouts.
6:19