SASS @error Rule - Usage and Syntax of this SCSS Directive

1. What is SASS @error Rule?

Just like the SASS @debug directive, this @error rule prints out some message upon some condition. While writing the SCSS script, we use this @error rule to verify that the arguments of functions are up to desired standards and expectations. This tutorial comprises of what is SASS @error directive and its syntax. Also, we will see how writing this directive helps during SCSS compilation.

1.1. Syntax of @error Directive

Usually, the syntax of the SCSS @error directive is similar to the @debug rule. However, unlike SASS @warn and @debug directives, the @error directive will stop the execution. The below box reads about the implementation syntax of this directive.

@error some-expression

2. Usage of SASS @error Rule?

The application of this @error rule or directive is very straightforward. We write the expression after the keyword and then see the results. The trace of the error is printed in the form of a string along with the line number. When an error occurs, the SASS transpiler stops working. The below example explains how to use this @error directive in our SCSS code.

@mixin heightFun($height) {
	@if type-of($height) != number {
			@error "Property #{$height} accepts numbers only.";
		}
	height:$height;
	width: $height*1.5;
}

div{
	@include heightFun(900px);
}
.container{
	@include heightFun(nothing);
}

fatal error: Line 3 ERROR: "Property nothing accepts numbers only." : line: 3

2.1. Explanation

The above example uses the @mixin rule to create a style rule in SCSS script. Within this mixin, we used conditions, and upon failing to fulfill the conditions @error rule or directive displays the error message. Certainly, this directive also stops the compilation process.

2.2. Benefits of This Directive

There are certain benefits of using this rule while scripting SCSS programs. Whenever, we find that some style rules need to be checked at later stages, we utilize this interesting directive.

Another benefit of using this directive is this that it also locats the file and number of line where problem occurs. Hence, it is easy and steadfast to manipulate our code to dissolve the issue.

3. Conclusion

Finally, we have learned in this tutorial that the @error rule in SASS is helpful to find out errors in our code. When certain conditions do not fulfill or the style rules deviate from the required outcomes, this directive stops the execution.