@content指令有什么用？

在SASS中，@content指令用于将CSS内容传递给mixin或函数。这些mixin和函数允许开发人员避免重复的代码。然而，@content指令也能帮助开发人员重用代码，但比函数和mixin提供更灵活的方式。

开发人员可以在代码块中定义CSS代码，同时在SCSS文件中包含mixin。然后，他们可以使用@content指令与mixin的预定义代码一起使用该代码。

让我们通过下面的例子来理解它。这样你就可以更清楚地理解@content指令了。

语法

用户可以按照下面的语法在SASS中使用@content指令。

@mixin test {
   @content;
}
#submit {
   @include test {
      /*添加要添加到mixin中的内容*/
   }
}

在上面的语法中，我们定义了“test”mixin，并在其中使用了@content指令。在#submit CSS选择器中，我们包含了“test”mixin，可以在mixin的代码块中使用CSS，该CSS将添加到“test”mixin中。

示例1

在下面的例子中，我们创建了“button”mixin，用于定义按钮的普通代码。一开始，我们添加了@content指令，然后添加了按钮的CSS。

然后，我们通过ID访问按钮，并在CSS选择器中包含“button”mixin。同时，我们在包含mixin时包含了特定的CSS代码。

在输出中，用户可以观察到“#submit”和“#cancel”两个CSS选择器都包括我们在“button（）”mixin中添加的通用代码和我们包含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;
   }
}

输出

#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;
}

示例2

在以下示例中，我们在媒体查询中使用了@content指令。

在这里，我们创建了“desktop”mixin，用于添加不同HTML元素的CSS以在桌面屏幕中进行样式设计。在这里，我们使用“desktop”mixin两次，并分别包含了不同的代码。

在输出中，用户可以观察到它生成了两个具有不同CSS内容的媒体查询。但是，两者都包括body选择器的样式。

@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;
   }
}

输出

@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%;
   }
}

示例3

在以下示例中，我们在动画关键帧中使用了@content指令。这里，我们有一个“animationkeyframes”mixin，它以帧名称作为参数。还定义了Chromium和mozila浏览器的关键帧。在这里，两个浏览器的CSS选择器不同，但内容可以相同。因此，我们在两个选择器中使用@content指令添加相同的内容。

首先，我们通过传递“shimmer”作为参数来调用“animationKeyFrames”，并在声明块中添加相关的CSS代码。之后，我们创建了“blur”关键帧。

@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;
   }
}

输出

在下面的输出中，我们可以观察到闪烁和模糊两个关键帧都添加到了Chromium和Mozila浏览器中。

@-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;
   }
}