What is the @content directive used for?

The @content directive is used in Sass to include dynamic content within a mixin or a placeholder selector. It allows you to pass content into a mixin or a placeholder and have it inserted at the location where @content is specified.

The @content directive acts as a placeholder for the content that will be passed when the mixin or placeholder is included. Here’s an example to illustrate its usage:

@mixin bordered-box {
  border: 1px solid #000;
  padding: 10px;
  
  @content; // Placeholder for dynamic content
}

.my-box {
  @include bordered-box {
    background-color: #f0f0f0;
    color: #333;
  }
}

In this example, the bordered-box mixin is defined with the @mixin directive. Inside the mixin, the @content directive is used as a placeholder for the dynamic content. The my-box class then includes the bordered-box mixin and provides additional CSS rules within the curly braces after the mixin call.

When the my-box class is compiled, the @content directive is replaced with the content provided in the mixin call. In this case, the background color and text color are passed as dynamic content and inserted at the location of @content in the bordered-box mixin.

The resulting CSS will be:

.my-box {
  border: 1px solid #000;
  padding: 10px;
  background-color: #f0f0f0;
  color: #333;
}

The @content directive is particularly useful when you want to create mixins or placeholders that have some common styles but require different dynamic content in different usage scenarios. It allows for greater flexibility and reusability by allowing the dynamic content to be passed and inserted at the appropriate location within the mixin or placeholder.

error: Content is protected !!