数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律学@content 指令有什么作用？
在 SASS 中，@content 指令用于将 CSS 内容传递到 mixin 或函数中。Mixin 和函数允许开发人员避免代码重复。但是，@content 指令也帮助开发人员重用代码，但比函数和 mixin 提供了更大的灵活性。
开发人员可以在包含 mixin 的 SCSS 文件中，在代码块内定义 CSS 代码。之后，他们可以使用 @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 中。
示例 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 和 Firefox 浏览器定义了关键帧。这里，这两个浏览器的 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 和 Firefox 浏览器添加了 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 指令允许我们避免代码重复，并具有完全的灵活性，因为我们可以在包含 mixin 时，在声明块内传递自定义 CSS 代码。但是，我们可以将值作为 mixin 的参数传递，但传递 20 到 30 个参数并不是一个好习惯，因为它会使代码变得更加复杂。
浏览量：184
