@content 指令的用途是什么?

cssweb developmentfront end technology更新于 2024/5/12 6:04:17

在 SASS 中，@content 指令用于将 CSS 内容传递给 mixin 或函数。mixin 和函数可以帮助开发者避免代码重复。然而，@content 指令也有助于开发者重用代码，并且比函数和 mixin 更灵活。

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

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

语法

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

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

在上述语法中，我们定义了"test"混合宏，并在其中使用了 @content 指令。在 #submit CSS 选择器中，我们引入了"test"混合宏，并且可以在即将添加到"test"混合宏的代码块中使用其 CSS。

示例 1

在下面的示例中，我们创建了"button"混合宏，它定义了按钮的通用代码。首先，我们添加了 @content 指令，然后添加了按钮的 CSS。

之后，我们通过按钮的 ID 访问按钮，并在 CSS 选择器中包含"button"混合宏。此外，我们在添加 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"混合宏，用于为桌面屏幕中需要设置样式的不同 HTML 元素添加 CSS。在这里，我们使用了两次"desktop"混合宏，并在两次混合中都添加了不同的代码。

在输出中，用户可以观察到它生成了两个包含不同 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"作为参数并在声明块中传递相关的 CSS 代码来调用"animationKeyFrames"。之后，我们创建了"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;
   }
}

示例 4

在下面的示例中，我们将 @content 指令与嵌套选择器结合使用。在这里，我们将类名作为 addChild() 混合宏的参数。在 SASS 中，我们需要使用"$"来访问变量。在这里，为了使用变量类名，我们使用"\"对"$"字符进行转义。

之后，在"parent"选择器中，我们通过将"child1"和"child2"类名作为参数传递来引入 addChild() 混合宏。此外，我们为不同的选择器添加了不同的 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 代码，同时包含 mixins。虽然我们可以将值作为 mixins 的参数传递，但传递 20 到 30 个参数并不是好习惯，因为这会使代码更加复杂。