SASS @function Rule - Arguments And Types in SCSS Function

1. What is SASS @function Rule?

Since SASS is a programming language, therefore it permits us to carry out different operations with the @function rule. This @function rule or directive is responsible to create functions of our choice, which execute certain operations as regulated in the SCSS program. Further, we can generate reusable functions in our SASS stylesheet with the succor of the @function rule or directive.

In this chapter, we will discover the syntax and usage principle of the @function directive in our SCSS sheets. Further, the tutorial also comprises how to add arguments and their types in SASS @function rule. Moreover, we are going to talk about the SASS @return rule and its handling. Additionally, we will discuss shortly some built-in functions in SCSS programming.

1.1. Syntax of SASS @function Directive

In SASS programming, we can define our personalized functions by employing the below syntax of the @function rule. Its syntax is written as under.

@function name-of-function(arguments...) { statements... }

1.2. Parts of SCSS @function Rule

As the above syntax symbolizes some key parts that a function can have. These parts are listed beneath.

1. The SCSS @function directive, the main component
2. Name of the function, which can be any name you want
3. Any arguments you want to write for that specific function
4. Statements, that are written inside the curly braces {...}

2. Usage of SCSS @function Directive

The working principle of the SCSS @function rule is rather fascinating among other at-rules. Firstly, we can define an SCSS function anywhere in our stylesheet. This function is at our fingertips to be called anywhere in the current file. Importantly, we call the SASS functions using the ordinary CSS syntax. Let us perceive the usage of the SCSS @function directive by the subsequent simplest illustration.

@function height( $width ) {
	$height: $width/2;
	@return $height;
}
.img-box {
	height: height(500)+px;
}

.img-box {
	height: 250px;
}

2.1. Explanation

• In the preceding example, we created an SCSS function height using the @function rule
• Further, this function takes an argument $width as input
• Also, the function uses the @return directive to return the $height comparative to the width provided
• Next, we exerted the function for class .img-box and computed its height
• Since the height function takes 500 value for width, it results in a height: 250px as shown in the CSS Code tab

3. Arguments in SASS @function Rule

As we have noticed in the syntax, the SASS @function directive also takes some arguments to conduct some operations and manipulate them. Every time, we provide a different argument value to our function, it will result in some unique outcome. Below are some key points concerning the SCSS @funtion rule arguments.

• Firstly, the function arguments always come after the function name.
• Secondly, the arguments are surrounded by parentheses, these SASS arguments are in the form of variables.
• Moreover, we can add more than one argument, as much as we require.
• All the supplied arguments are isolated by commas.
• Most importantly, when we call a function, we must assign it with the exact number of input values as the number of arguments specified.
• Otherwise, there will be an error in the transpilation.
• The given values have corresponding values in the function body as variables.

4. Types of Arguments in SASS @function Directive

While writing a function in SASS, we have the freedom to take four kinds of arguments. Any function we write using the @function directive will possess any of these types of arguments. These four types are listed below.

1. Mandatory Arguments
2. Optional Arguments
3. Keyword Arguments
4. Arbitrary Arguments

4.1. Mandatory Arguments

As we have explored in the above lines, any SASS function must provide the number of values as input equal to the number of arguments allotted. These are called mandatory or compulsory arguments. Further, this is a normal practice or a usual method to declare mandatory arguments. When calling a function, if we pass extra or fewer the number of input values, the compilation will suspend and an error occurs. Let us find out this mandatory type argument from the following example.

@function width( $image-width, $text-width ) {
	$width: $image-width + $text_width;
	@return $width;
}
.content-wrapper{
	max-width: width(500, 300)+px;
}

.content-wrapper {
	max-width: 800px;
}

4.2. Optional Arguments

Those arguments, which are not important and non-compulsory are called optional arguments. Now, the question arises of how to create an optional argument in our SASS functions?

• First of all, we can define an optional SASS argument in our function by providing a default value for that distinct argument.
• Also, these default values can be any SassScript expression or even earlier arguments.
• Further, this value serves as a backup or fallback value if no input is given for that argument.
• The syntax to declare default values of the argument is alike to defining a variable.
• Moreover, these optional arguments make SASS functions a bit flexible to take input values in a convenient way.

We created two functions using the @function rule to describe SASS optional arguments. The below example completely portrays the usage of optional arguments in the SCSS script.

@function signup( $heading-width, $icon-width : 50 ) {
	$width-wrapper: $heading-width + $icon-width;
	@return $width-wrapper;
}
@function signin( $heading-width, $icon-width: 80 ){
	$width-wrapper: $heading-width + $icon-width;
	@return $width-wrapper;
}

// Passing Arguments
.signup-wrapper{
	max-width: signup(500)+px;
}
.signin-wrapper{
	max-width: signin(500, 100)+px;
}

.signup-wrapper {
	max-width: 550px;
}
.signin-wrapper {
	max-width: 600px;
}

4.3. Keyword Arguments

The keyword arguments are of a special kind because they accept values in the form of argument or variable names upon calling the function. Further, when more than one argument is passed, their positions also matter. The syntax is similar to optional arguments. Importantly, care must be taken to rename the arguments as the users of that function will affect by this change. To comprehend the keyword arguments and how to pass them to the function, we utilized a built-in SASS function scale-color. It takes a keyword argument $lightness and a user-provided general argument as a keyword.

$site-color: #2a73cc;
.primary-menu{
	background: $site-color;
	color: scale-color($site-color, $lightness: + 90%);
}

.primary-menu {
	background: #2a73cc;
	color: #e9f1fa;
}

4.4. Arbitrary Arguments

Sometimes a function is designed so that it can take undefined expressions as input and termed arbitrary arguments. We use arbitrary arguments in our SCSS @function directive when we don't know the exact number of arguments. Thus, to define an arbitrary argument, we use ... after declaring the first argument. All the later arguments will be passed as a list isolated by commas. We employed SASS @each directive to take in the arbitrary arguments for our function. Examine the adjacent CSS tab to witness the output.

@function total-width($elements...) {
	$sum: 0;
	@each $element in $elements {
		$sum: $sum + $element;
	}
	@return $sum;
}

// Passing arguments
.content-wrapper {
	width: total-width(200px, 300px, 100px);
}

.content-wrapper {
	width: 180px;
}

Furthermore, the SCSS functions can also have arbitrary arguments in the form of keywords. We use meta.keywords() function to introduce keyword lists as arbitrary arguments. Moreover, there are two kinds of arbitrary arguments.

1. Arbitrary positional arguments
2. Arbitrary keyword arguments

4.4.1. How To Pass Arbitrary Arguments to the Function?

While formulating a SASS @function rule, we declare arbitrary arguments as the first argument followed by ..., called argument list. Then, to use the function, it might be in your mind how to pass values to those arguments. That is quite simple and similar to defining arguments, we can pass values or arguments to the function as a list. We pass the first argument with name and then followed by ... that will serve as a list.

In the previous example, we used the @each rule for passing arbitrary arguments. See the below example in which we used SCSS built-in function max and min to do the job.

$widths: 800px, 900px, 600px;
@media screen and (max-width: 680px){
	.wrapper {
		width: min($widths...);
	}
}
@media screen and (max-width: 980px){
	.wrapper {
		width: max($widths...);
	}
}

@media screen and (max-width: 680px) {
	.wrapper {
		width: 600px;
	}
}
@media screen and (max-width: 980px) {
	.wrapper {
		width: 900px;
	}
}

5. SASS @return Rule

The SASS @function rule is useful to create new functions, however, it only works with the SCSS @return directive. If there is no @return rule available in our function, the function will result in a compile-time error.

• Moreover, the @return is a compulsory component or directive of SCSS functions to yield the output.
• Further, the @return rule is only permitted within SCSS @function directive.
• Also, any function in SASS must terminate with @return rule.
• Whenever, a @return rule is encountered in a function and conditions matches, the function ends immediately.
• All examples discussed above comprise of this directive as mandatory component.

@function my-function($arg1, $arg2){
	$addition : $arg1 + $arg2;
	@return $addition;
}

6. SASS Built-In Funtions

In this tutorial, all the above sections involve SCSS user-defined functions. However, SASS comes up with many built-in functions to utilize in our stylesheets. These built-in functions are divided into modules and are listed below.

1. Color Module works with colors
2. List Module to work and modify lists
3. Map Module looks for values associated with a particular key
4. Math Module for manipulating digits or numbers
5. Meta Module discloses inner details of SASS
6. Selector Module collaborates with super SASS engine
7. String Module is used to perform operations on strings

7. Conclusion

The final words about SASS @function rule are that it is a useful directive to improvise interesting and exciting SCSS functions. We learned about the syntax and usage method of function directives in this tutorial. Further, we also looked into the arguments and their types deeply. Also, we learned why the @return rule is important in SCSS functions. And finally, we took a bird's eye view of SASS's built-in functions and the total number of its modules.