SASS @at-root Rule - Syntax Types and Usage

1. What is @at-root Rule in SASS?

Since the at rules extend the functionality of SASS programming, and the basic or most working of SCSS is hidden in nesting of style rules. The first rule or directive of the series is SASS @at-root introduced with version v3.3. This SCSS directive or rule basically adds anything enclosed in its premises to break the nesting of the current rule set. This @at-root rule is quite useful when implementing advanced nesting rules in SASS stylesheets.

Further, this tutorial aims on the types of syntax for this directive. Also, the usage of each syntax along with an elaborative code sample. Importantly, the examples in this tutorial uses a tabbed navigation. The SCSS code is by default displayed, see the CSS equivalent code by switching to that tab.

1.1. Syntax of @at-root Rule

The syntax of this SCSS rule is very simple to understand and implement. Basically, there are three types of syntax for SASS @at-root rule or directive. We will look into each stynax one by one. Take a glance on the below box to apprehend its syntax.

1. @at-root some-selector{...style rules or declarations...}
2. @at-root (arguments){...style rules or declarations...}
3. @at-root {...style rules only...}

2. Usage of @at-root Rule

Since the SASS script works mostly on nested style rules. Therefore, the usage of the SCSS @at-root directive will only work in the nesting structure. As we have seen the three types of syntax in which we can implement the SASS @at-root rule. Let us understand this directive while writing simple SASS programs.

2.1. Syntax Type-1

The first type of syntax is simple, it takes the directive followed by the selector and then some style rules or declarations only within braces{}. Below is the first type of syntax for utilizing this rule in our stylesheet.

@at-root some-selector{...style rules or declarations...}

Let us comprehend this syntax of this directive with an example.

.header h2{
	font-size: 30px;
	color: #333;

	@at-root h2{
		font-size: 20px;
		color: #2a73cc;
	}
	@at-root a#{&}{
		text-decoration: none;
	}
}

.header h2{
	font-size: 30px;
	color: #333;
}
h2{
	font-size: 20px;
	color: #2a73cc;
}
a.header h2{
	text-decoration: none;
}

Explanation

Below is the explanation of the above sample code.

• By default, the SASS @at-root directive sends any style rules or declarations within it, outside of its parent rule.
• @at-root h2{...}: It is the simplest use as it emits an h2 selector and declarations outside of the parent rule.
• @at-root a#{&} {...}: In this iteration, we used interpolation #{} and parent selector &.
• The compiled CSS styles in the adjacent tab explores the behavior.
• Basically, it declares styles for the anchor tag when it has .header class and h2 nested.

2.2. Syntax Type-2

The second type of syntax for the @at-root rule takes some arguments outside the brace {} in SCSS code. Usually, we write the arguments within round brackets or parenthesis (). Following is the syntax notation for this type.

@at-root (arguments){...style rules or declarations...}

Let us take a further experience of this SCSS @at-root rule or directive by some examples.

body{
	@media screen and (max-width: 780px){
		@at-root (with: rule){
			font-size: 14px;
			color: #000;
			line-height: 1.7;
		}
		@at-root (without: media){
			h3{
				font-size: 24px;
				color: #000;
				padding: 10px 0;
			}
		}
		@at-root (with: media rule){
			h3{
				font-size: 14px;
				color: #000;
				line-height: 1.7;
			}
		}
	}
}

body{
	font-size: 14px;
	color: #000;
	line-height: 1.7;
}
body h3{
	font-size: 14px;
	color: #000;
	padding: 10px 0;
}
@media screen and (max-width: 780px){
	body h3{
		font-size: 14px;
		color: #000;
		line-height: 1.7;
	}
}

Explanation

In the above example, we have witnessed three types of arguments used in the syntax.

• @at-root (with: rule): This will take the declarations or rules inside the curly braces along with the outermost body rule.
• @at-root (without: media): It will exclude the media query and transpiles the parent rule and any inner rules or declarations.
• @at-root (with: media rule): The SCSS directive is telling the parser to take media and the parent rule along with its sub-child rules or declarations.
• In a deep-down nesting, if we want to include or exclude all the arguments, we can simply write @at-root (with: all) or @at-root (without: all).
• Writing with: all or without: all will takes all the outer selectors or exclude them.

2.3. Syntax Type-3

The third type of syntax for the @at-root directive is a bit simple but its usage is somehow technical. It means that it will work only if certain conditions are fulfilled. Below is the syntax of this third type.

@at-root {...style rules only...}

Let us look into it with an instance and know its technicalities.

header{
	@media screen and (max-width: 780px){
		@at-root{
			h4{
				font-size: 20px;
				padding: 10px 0;
			}
		}
		@at-root (with: rule){
			background: #153966;
			font-size: 28px;
		}
	}
}

@media screen and (max-width: 780px){
	h4{
		font-size: 20px;
		padding: 10px 0;
	}
}
header{
	background: #153966;
	font-size: 28px;
}

Explanation

The above illustration of syntax has two variants as below.

• @at-root{ h4{...} }: The rule has no arguments or selectors right after the directive.
• There is a style rule within the braces of this at-rule.
• @at-root (with: rule){...}: In this type, the directive has an argument but no style rule within its braces.
• It is important to note that, if we write no argument and no style rule with the SCSS @at-root directive, then it will display an error.

3. Conclusion

Finally, we can say that the SCSS @at-root directive or rule plays a key role. When you want some style rules to get out of the nesting in relation to its outer rules, this at-rule is useful. Also, we discussed that the at-root directive has three types of syntax to use in writing style declarations.