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

Tutorial Contents:

  1. What is SCSS @return at-rule?
  2. How to Employ this Directive?

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
	$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
Give Us Your Feedback
If You Need Any Help!
Contact Us