@each $var in <list or map>
$var: 它代表了變量的名稱。 @each規(guī)則將 $var 每個(gè)項(xiàng)目在列表中使用 $var 值輸出樣式。
<list 或 map>: 這是 SassScript 表達(dá)式這將返回一個(gè)列表或映射。
<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>
@each $color in red, green, yellow, blue {
.p_#{$color} {
background-color: #{$color};
}
}
sass --watch C:\Ruby22-x64\style.scss:style.css
.p_red {
background-color: red; }
.p_green {
background-color: green; }
.p_yellow {
background-color: yellow; }
.p_blue {
background-color: blue; }
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多