@content 指令的用途是什么？

百变鹏仔 3个月前 (09-20) #CSS

文章标签指令

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

开发人员可以在代码块中定义CSS代码，并在SCSS文件中包含mixin。之后，他们可以使用@content指令将该代码与mixin的预定义代码结合使用。

让我们通过下面的例子来理解它。因此您可以获得有关 @content 指令的更多信息。

语法

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

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

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

Example 1

的中文翻译为：

示例1

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

之后，我们通过 id 访问按钮，并将“button”混合包含在 CSS 选择器中。此外，我们在包含 mixin 的同时还包含了按钮的特定 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;}

Example 2

的中文翻译为：

示例2

在下面的示例中，我们使用了@media查询和@content指令。

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

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

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

Example 3

的中文翻译为：

示例 3

在下面的示例中，我们使用了带有动画关键帧的@content指令。这里，我们有一个名为“animationkeyframes”的mixin，它以帧名称作为参数。此外，我们为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浏览器添加了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代码。然而，我们可以将值作为混合器的参数传递，但是将20到30个参数传递是不好的实践，因为它会使代码变得更加复杂。

文章推荐

@content 指令的用途是什么？

语法

Example 1

示例1

输出

Example 2

示例2

输出

Example 3

示例 3

输出

示例 4

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写