What is the @content directive used for?

IN SASS, the @content directive is used to pass the CSS content into the mixins or functions. The mixins and functions allow developers to avoid the repetitions of the code. However, the @content directive also helps developers to reuse the code but provides more flexibility than functions and mixins.

Developers can define the CSS code inside the code block while including the mixin in the SCSS file. After that, they can use that code with the pre-defined code of the mixins using the @content directive.

Let’s understand it via the examples below. So you can get more clearance about the @content directive.

Syntax

Users can follow the syntax below to use the @content directive in SASS.

@mixin test {
   @content;
}
#submit {
   @include test {
      /* add content to add in mixin /*
   }
}

In the above syntax, we have defined the ‘test’ mixin and used the @content directive inside that. In the #submit CSS selector, we have included the ‘test’ mixin, and we can use the CSS inside the code block of the mixin that will be added inside the ‘test’ mixin.

Example 1

In the example below, we have created the ‘button’ mixin, which defines the general code for the button. In the beginning, we added the @content directive and then added CSS for the button.

After that, we access the buttons by their id and include the ‘button’ mixin inside the CSS selector. Also, we include the specific CSS code for the button while including the mixin.

In the output, users can observe that ‘#submit’ and ‘#cancel’ both CSS selectors include the general code we added inside the ‘button()’ mixin and the particular code we have added while 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 example below, we have used the @content directive with the media queries.

Here, we have created the ‘desktop’ mixin to add CSS for the different HTML elements to style in the desktop screen. Here, we have used the ‘desktop’ mixin two times and included the different codes in both.

In the output, users can observe that it generates two media queries with different CSS content. However, both include the style 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 example below, we have used the @content directive with the animation keyframes. Here, we have an ‘animationkeyframes’ mixin, which takes the frame name as a parameter. Also, we define the keyframes for the Chromium and mozila browsers. Here, CSS selectors for both browsers are different, but the content can be the same. So, we have used the @content directive with both selectors to add the same content.

First, we have called ‘animationKeyFrames’ by passing ‘shimmer’ as a parameter and related CSS code in the declaration block. After that, we have created the ‘blur’ keyframe.

@mixin animationKeyFrames($frameName) {
   @-webkit-animationkeyframes #{$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 below output, we can observe that shimmer and blur both keyframes added for the Chromium and Mozila 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 example below, we have used the @content directive with the nested selectors. Here, we take a class name as a parameter in the addChild() mixin. In the SASS, we require to use the ‘$’ to access the variable. Here, to use the variable class name, we have used the ‘\’ to escape the ‘$’ character.

After that, inside the ‘parent’ selector, we included the addChild() mixin by passing the ‘child1’ and ‘child2’ class names as a parameter. Also, we added different CSS codes for the different selectors.

In the output, we can see that in the ‘parent’ selector, the general properties of a parent are added. Only specified properties are added in the ‘child1’ and ‘child2’ nested selectors.

@mixin addChild($child) {
   .\$child {
      @content;
   }
}
.parent {
   @include addChild("child1") {
      color: grey;
      width: 30%;
   }
   @include addChild("child2") {
      color: blue;
      width: 70%;
   }
   background-color: red;
   width: 100%;
   height: auto;
}

Output

.parent {
   background-color: red;
   width: 100%;
   height: auto;
}
.parent .\$child {
   color: grey;
   width: 30%;
}
.parent .\$child {
   color: blue;
   width: 70%;
}

Users learned to use the @content directive in SASS. Basically, the content directive allows us to avoid the reputations of code with full flexibility as we can pass the custom CSS code inside the declaration block while including the mixins. However, we can pass values as a parameter of mixins, but it is not good practice to pass the 20 to 30 parameters as it makes the code more complex.