SASS @return Rule - Usage of This SCSS Directive

1. What is @return Rule in SASS?

The @return rule yields the output of an @function directive in SASS script. Therefore, we can say that this @return directive is a dependent rule in SCSS language just like the @include and @content directives, which rely on the @mixin rule.

1.1. Syntax of SCSS @return Rule

The syntax of this @return directive is straightforward. We just have to write a SASS @function and get the output through this @return rule.

@function function-name{
	@return $variable-name;
}

@function function-name
	@return $variable-name

// CSS output

1.2. Importance of SCSS @return Directive

• As this @return directive depends on the SCSS @function rule, therefore it is very much crucial for a SASS function
• The working of a SASS function and this @return directive are connected
• Moreover, both of these at-rules do not work and have no meaning without each other
• Hence, we can say that there must be an SCSS @return rule to execute a function
• Further, there must also be a SASS function to let the @return directive do its job.

2. Usage of SASS @return Directive

To utilize the SCSS @return rule, we have to write a SASS function. Moreover, whenever the function encounters a return directive, it terminates immediately. Let us discern this SCSS at-rule with an example.

@function padding( $width ) {
	$padding: 0;
	@if $width >= 680px {
		$padding: 10px;
	}
	@if $width >= 980px {
		$padding: 20px;
	}
	@if $width >= 1100px {
		$padding: 30px;
	}
	@return $padding;
}

// Passing Arguments
.signin-wrapper{
	$width-1: 700px;
	$width-2: 1000px;
	$width-3: 1300px;
	@media screen and (max-width: 680px){
		width: $width-1;
		padding: padding($width-1);
	}
	@media screen and (max-width: 980px){
		width: $width-2;
		padding: padding($width-2);
	}
	@media screen and (max-width: 1180px){
		width: $width-3;
		padding: padding($width-3);
	}
}

@media screen and (max-width: 680px){
	.signin-wrapper {
		width: 700px;
		padding: 10px;
	}
}
@media screen and (max-width: 980px){
	.signin-wrapper {
		width: 1000px;
		padding: 20px;
	}
}
@media screen and (max-width: 1180px){
	.signin-wrapper {
		width: 1300px;
		padding: 30px;
	}
}

2.1. Explanation

• We defined a SASS function padding by using the @function rule
• This SASS @function directive takes $width as an argument of the function
• Further, this function calculates the padding size according to the width of the .signin-wrapper selector
• Also, initially, we set the $padding variable to 0
• Further, we checked each provided width with the @if control rule to figure out the CSS padding size accordingly
• At the end of the function, we used the @return SCSS directive to compute the function results
• Next, we passed each provided width to the padding function and got the resulted padding size
• Hence, the utility of the @return rule and SCSS @function directive is evident in this example