What is the use of the @content directive?
What is the @content directive used for?
In SASS, the @content directive is used to pass CSS content to a mixin or function. These mixins and functions allow developers to avoid duplicating code. However, the @content directive also helps developers reuse code, but in a more flexible way than functions and mixins.
Developers can define CSS code in a code block while including a mixin in their SCSS file. They can then use that code with the mixin’s predefined code using the @content directive.
Let’s understand it through the following example. This way you can understand the @content directive more clearly.
Syntax
Users can use the @content directive in SASS using the following syntax.
@mixin test {
@content;
}
#submit {
@include test {
/*Add the content to be added to the mixin*/
}
}
In the above syntax, we define the “test” mixin and use the @content directive within it. In the #submit CSS selector, we include the “test” mixin. Within the mixin’s code block, we can use CSS, which will be added to the “test” mixin.
Example 1
In the following example, we create the “button” mixin to define the common code for a button. Initially, we added the @content directive and then added the button’s CSS.
Then, we accessed the button by ID and included the “button” mixin in the CSS selector. We also included the specific CSS code when including the mixin.
In the output, you can observe that both the “#submit” and “#cancel” CSS selectors include the generic code we added in the “button()” mixin and the specific code we added when including the mixin.
@mixin button() {
@content;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border: solid 1px green;
}
#submit {
@include button {
color: blue;
font-size: 2rem;
}
}
#cancel {
@include button {
color: red;
}
}
Output
#submit {
color: blue;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border: solid 1px green;
}
#cancel {
color: red;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border: solid 1px green;
}
Example 2
In the following example, we use the @content directive in a media query.
Here, we create the “desktop” mixin, which adds CSS for different HTML elements for styling on desktop screens. We use the “desktop” mixin twice, including different code for each.
In the output, you can observe that it generates two media queries with different CSS content. However, both include styles for the body selector.
@mixin desktop {
@media screen and (min-width: 1200px) {
@content;
body {
width: 90%;
height: 90%;
margin: 0 5%;
}
}
}
@include desktop {
.block {
max-width: 500px;
margin: 0 auto;
font-size: 3rem;
}
.child {
color: green;
}
}
@include desktop {
.element {
color: red;
}
}
Output
@media screen and (min-width: 1200px) {
.block {
max-width: 500px;
margin: 0 auto;
font-size: 3rem;
}
.child {
color: green;
}
body {
width: 90%;
height: 90%;
margin: 0 5%;
}
}
@media screen and (min-width: 1200px) {
.element {
color: red;
}
body {
width: 90%;
height: 90%;
margin: 0 5%;
}
}
Example 3
In the following example, we use the @content directive in animation keyframes. Here, we have an “animationkeyframes” mixin that takes a frame name as a parameter. It also defines keyframes for Chromium and Mozilla browsers. The CSS selectors for the two browsers are different, but the content can be the same. Therefore, we use the @content directive to add the same content in both selectors.
First, we call “animationKeyFrames” by passing “shimmer” as a parameter and add the relevant CSS code in the declaration block. Then, we create the “blur” keyframe.
@mixin animationKeyFrames(<span class="katex math inline">frameName) {
@-webkit-animationkeyframes #{</span>frameName} {
@content;
}
@-moz-animationkeyframes #{$frameName} {
@content;
}
}
@include animationKeyFrames(shimmer) {
0% {
background-color: blue;
}
50% {
background-color: red;
}
70% {
background-color: green;
}
}
@include animationKeyFrames(blur) {
0% {
opacity: 1;
}
30% {
opacity: 0.6; }
60% {
opacity: 0.3;
}
95% {
opacity: 0;
}
}
Output
In the output below, we can observe that both the flicker and blur keyframes are added to both the Chromium and Mozilla browsers.
@-webkit-animationkeyframes shimmer {
0% {
background-color: blue;
}
50% {
background-color: red;
}
70% {
background-color: green;
}
}
@-moz-animationkeyframes shimmer {
0% {
background-color: blue;
}
50% {
background-color: red;
}
70% {
background-color: green;
}
}
@-webkit-animationkeyframes blur {
0% {
opacity: 1;
}
30% {
opacity: 0.6;
}
60% {
opacity: 0.3;
}
95% {
opacity: 0;
}
}
@-moz-animationkeyframes blur {
0% {
opacity: 1;
}
30% {
opacity: 0.6;
}
60% {
opacity: 0.3;
}
95% {
opacity: 0;
}
}
Example 4
In the following example, we use the @content directive in a nested selector. Here, we use a class name as a parameter to the addChild() mixin. In SASS, we need to use “” to access variables. Here, we use “” to escape the “”“” character to use the variable class name.