Custom Functions6:22 with Guil Hernandez
Besides 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 Ns or Ms 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
You need to sign up for Treehouse in order to download course files.Sign up