SASS @warn Rule - Usage of @warn SCSS Directive

1. What is SASS @warn Rule?

The @warn rule in the SASS language prompts some message to the developers while passing values or arguments to other SCSS at-rules like functions, mixins, etc. Therefore, to notify the users while passing arguments, we employ the @warn directive to specify some instructions. These directions serve as advice and help the users to put in the appropriate values.

1.1. Syntax of SASS @warn Directive

Writing the SCSS @warn rule is simply straightforward. Its syntax has two components comprising the @warn keyword and the expression to exhibit some caution. This SCSS expression can be any string, variable, or another component of the SCSS programming. Let us comprehend the syntax of the SCSS @warn directive by following notation.

@warn <expression>;

2. Usage of SCSS @warn Rule

• The SCSS @warn directive is formulated to output some alerts to the user while passing arguments.
• This output may be any string, the value of the SCSS variable, or other SASS expressions, and a stack trace indicating how the current SCSS @function or @mixin directive is called.
• Also, we may instruct the user on how to use an API for optimal outcomes.
• Further, we can inform the users of current @mixin, @function, etc. to avoid employing the deprecated arguments for that particular SASS at-rule.
• The behavior of @warn directive is simlar to the SCSS @debug rule i.e. it does not terminates the compilation.
• However, unlike the SCSS @error directive, the @warn rule does not stop the transpilation completely.
• It just shows the message or warning in the console for the user.

Let us anticipate the concept of the SASS @warn rule with the help of the below instance.

$known-prefixes: webkit, moz, ms, o;
@mixin shadow($property, $value, $prefixes) {
	@each $prefix in $prefixes {
		@if not index($known-prefixes, $prefix) {
			@warn "Unknown prefix #{$prefix}.";
		}

		-#{$prefix}-#{$property}: $value;
	}
	#{$property}: $value;
}

.main-wrapper{
	$prefix-variants: webkit, mox;
	@include shadow(box-shadow, 0 0 5px 0 #333, $prefix-variants);
}

Warning: Unknown prefix mox.
	main.scss 6:7 shadow()
	main.scss 16:3 root stylesheet

.main-wrapper {
	-webkit-box-shadow: 0 0 5px 0 #333;
	-mox-box-shadow: 0 0 5px 0 #333;
	box-shadow: 0 0 5px 0 #333;
}

2.1. Explanation

• In the above example, we formulated an SCSS mixin shadow to generate property variants that we often include for browser compatibility.
• This mixin takes three arguments as input and applies prefixes for each variant separately.
• Further, we utilized the @if directive to indicate a warning to the user when any of the prefixes by the user is wrongly passed.
• The @if rule encompasses the SASS @warn directive and triggers the console warning whenever it encounters the wrong prefix input.
• Also, the SCSS interpolation #{} is employed throughout the process to attach the values of the variables.
• Next, we used the mixin shadow within the .main-wrapper style rule and entered webkit and mox as prefix variants.
• Since the mox variant mismatches the known-prefixes in the mixin definition, the console displays the warning as shown.