CSS @content指令有什么用途

在SASS中，@content指令用来将CSS内容传递到mixin或函数中。混合和函数允许开发者避免代码的重复。然而，@content指令还帮助开发者重新使用代码，但比函数和混合提供更大的灵活性。

开发者可以在包含mixin的SCSS文件中定义代码块内的CSS代码。然后，使用@content指令将该代码与mixin的预定义代码结合使用。

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

语法

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

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

在上述语法中，我们定义了名为’test’的混合器，并在其中使用了@content指令。在#submit的CSS选择器中，我们包含了’test’混合器，并且可以在混合器的代码块中使用CSS，该CSS将添加到’test’混合器中。

示例1

在下面的示例中，我们创建了名为’button’的混合器，该混合器定义了按钮的通用代码。在开始时，我们添加了@content指令，然后添加了按钮的CSS代码。

然后，我们通过id访问按钮，并在CSS选择器中包含’button’混合器。同时，我们在包含混合器时还包含了按钮的特定CSS代码。

在输出中，用户可以观察到’＃submit’和’＃cancel’两个CSS选择器都包含了我们在’button()’混合器中添加的通用代码以及我们在包含混合器时添加的特定代码。

@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”混合器，它以帧名称作为参数。同时，我们为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浏览器，都添加了shimmer和blur两个关键帧。

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

示例4

在下面的示例中，我们使用嵌套选择器和@content指令。在这里，我们将一个类名作为addChild（）mixin的参数。在SASS中，我们需要使用$来访问变量。在这里，为了使用变量的类名，我们使用\来转义$字符。

之后，在‘parent’选择器内部，通过将‘child1’和‘child2’类名作为参数传递，我们包括了addChild（）mixin。此外，我们为不同的选择器添加了不同的CSS代码。

输出结果中，我们可以看到在‘parent’选择器中，添加了父元素的一般属性。‘child1’和‘child2’嵌套选择器中只添加了指定的属性。

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

输出

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

用户学会了在SASS中使用@content指令。基本上，content指令允许我们以灵活的方式避免代码的重复，我们可以在声明块内部传递自定义的CSS代码，并包含mixin。然而，虽然我们可以将值作为mixin的参数传递，但是将20到30个参数传递是不好的实践，因为这样会使代码更加复杂。