W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
在@each中,定義了一個(gè)變量,其中包含列表中每個(gè)項(xiàng)目的值。
@each $var in <list or map>
下面簡要解釋語法。
$var: 它表示變量的名稱。 @each規(guī)則將$var設(shè)置到列表中的每個(gè)項(xiàng)目,并使用值$var輸出樣式。
<list or map>: 這些是SassScript表達(dá)式,將返回列表或映射。
下面的例子演示了使用@each指令:
<html> <head> <title>Control Directives & Expressions</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <p class="p_red">This is line one.</p> <p class="p_green">This is line two.</p> <p class="p_yellow">This is line three.</p> <p class="p_blue">This is line four.</p> </body> </html>
接下來,創(chuàng)建文件style.scss。
@each $color in red, green, yellow, blue { .p_#{$color} { background-color: #{$color}; } }
您可以通過使用以下命令讓SASS查看文件,并在SASS文件更改時(shí)更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下來執(zhí)行上面的命令,它將自動(dòng)創(chuàng)建style.css文件用下面的代碼:
.p_red { background-color: red; } .p_green { background-color: green; } .p_yellow { background-color: yellow; } .p_blue { background-color: blue; }
讓我們執(zhí)行以下步驟,看看上面的代碼如何工作:
將上述html代碼保存在@ each.html文件中。
在瀏覽器中打開此HTML文件,將顯示如下輸出。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: