Rumah >hujung hadapan web >tutorial css >Apakah tujuan arahan @content?
在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中。
在下面的示例中,我们创建了“按钮”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; }
在下面的示例中,我们使用了@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%; } }
在下面的示例中,我们使用了带有动画关键帧的@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; } }
在下面的示例中,我们将 @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个参数传递是不好的实践,因为它会使代码变得更加复杂。
Atas ialah kandungan terperinci Apakah tujuan arahan @content?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!