資料結構
網路
關係型資料庫管理系統
作業系統
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
