SASS @content Rule - SCSS Content Block Directive

1. What is SASS @content Rule?

The @content rule or directive is a dependent at-rule in SASS language. It is important to note that the SCSS @content directive only works with the @mixin rule. Therefore, this SASS rule does not have any meaning or function without the @mixin directive.

1.1. Syntax of SCSS @content Rule

While declaring a mixin in an SCSS stylesheet, we can boost its functionality by encompassing a whole block of style declarations nested to that particular mixin. Look at the following syntax of this SCSS @content directive.

selector {
	@content;
}

selector
	@content

// CSS Styles

2. What is Content Block in SASS?

A content block in SCSS is the chunk of SCSS or CSS styles that we add by using the @content rule. Usually, this @content block is included in conjunction with the @mixin rule and SCSS @include directive.

• Firstly, the @content rule represents the content block in SCSS.
• We can pass it by mere placing it within the curly braces.
• Upon compilation, the style blocks are replaced with the SASS @content directive.
• Moreover, we can add multiple @content blocks in our SCSS stylesheet.
• However, several content blocks in the SCSS @mixin directive will be included separately.
• Also, the content blocks are lexically scoped and can only access the local variables.
• Importantly, the content block in SASS is dependent on the SASS @include directive.
• Without the @include SCSS directive, it cannot be implemented.

2.1. Usage of SASS @content Directive

Let us understand the usage of the SCSS @content directive by the below instance.

@mixin mobile-screen {
	@media screen and (max-width: 680px){
		@content;
	}
}
@mixin tab-screen {
	@media screen and (max-width: 980px){
		@content;
	}
}
h1{
	font-size: 36px;
	font-fmaily: 'Noto sans', sans-serif;
	margin: 30px 20px;
	@include tab-screen{
		font-size: 32px;
		margin: 20px 10px;
	}
	@include mobile-screen{
		font-size: 30px;
		margin: 15px 10px;
	}
}

h1 {
	font-size: 36px;
	font-fmaily: "Noto sans", sans-serif;
	margin: 30px 20px;
}
@media screen and (max-width: 980px) {
	h1 {
		font-size: 32px;
		margin: 20px 10px;
	}
}
@media screen and (max-width: 680px) {
	h1 {
		font-size: 30px;
		margin: 15px 10px;
	}
}

2.2. Explanation of @content Example

The above SCSS @content directive is described below.

• In the above instance, we created two mixins named mobile-screen and tab-screen.
• Each of the mixins contains an SCSS @content block.
• Further, while writing our SASS stylesheet, whenever we need to write the equivalent code for the mobile or tab screen, of a particular selector, we can make use of these mixins.
• We add the components to display in place of the @content block within the curly braces, after including the mixins.
• After transpilation, the style rules or declarations within the curly braces are nested and processed with that specific mixin.

3. SCSS @content Rule With Arguments

Since we can include a mixin with arguments, in the same way, a mixin can pass arguments to the @content directive. The arguments are added in a list, just like we add them for the mixin, separated by commas.

3.1. Syntax For @content Arguments

Below is the general syntax to define the mixin and arguments for the mixin and the @content block. Also, how to pass the arguments to the @content block after defining the SCSS mixin.

// Defining Mixin and arguments
@mixin some-name($arg){
	@content($arg);
}

// Passing arguments
some-selector{
	@include some-name(arguments to pass) using ($arg){
	// style rules or declarations
	}
}

3.2. Usage of Arguments in SCSS @content Directive

Let us understand this concept of how to define and pass the arguments to the @content rule in the SCSS stylesheet.

@mixin theme($color) {
	@if $color != #fff{
		color: $color;
		background: rgba($color, 0.2);
	}
	padding: 20px;
	text-align: center;
	@content ($color);
}
.wrapper{
	@include theme(white) using ($arg){
		@if $arg == white{
			background: #333;
			color: $arg;
		}
		margin: 0;
	}
}

.wrapper {
	padding: 20px;
	text-align: center;
	background: #333;
	color: white;
	margin: 0;
}

3.3. Explanation of @content Arguments

• The above instance utilizes the arguments along with the @content directive.
• We created a mixin theme that takes an argument $color.
• Further, this argument is employed within the mixin to check the conditions and finally incorporated inside the @content rule.
• Next, we included the theme mixin using the SCSS @include rule and passed the argument value.
• This argument value is further passed to the content block.
• Finally, you can see the output CSS generated in the adjacent tab.