編程教程sass教程 Sass @each指令
描述
在@each中，定義了一個變量，其中包含列表中每個項目的值。
語句
@each$varin<listormap>
下面簡要解釋語法。
$var:它表示變量的名稱。 @each規則將$var設置到列表中的每個項目，并使用值$var輸出樣式。
<list or map>:這些是SassScript表達式，將返回列表或映射。
例子
下面的例子演示了使用@each指令：
<html><head><title>Control Directives & Expressions</title><linkrel="stylesheet"type="text/css"href="style.css"/></head><body><pclass="p_red">This is line one.</p><pclass="p_green">This is line two.</p><pclass="p_yellow">This is line three.</p><pclass="p_blue">This is line four.</p></body></html>
接下來，創建文件style.scss。
style.scss
@each$colorinred,green,yellow,blue{.p_#{$color} {background-color:#{$color};}}
您可以通過使用以下命令讓SASS查看文件，并在SASS文件更改時更新CSS：
sass--watch C:\ruby\lib\sass\style.scss:style.css
接下來執行上面的命令，它將自動創建style.css文件用下面的代碼：
style.css
.p_red{background-color:red;}.p_green{background-color:green;}.p_yellow{background-color:yellow;}.p_blue{background-color:blue;}
輸出
讓我們執行以下步驟，看看上面的代碼如何工作：
將上述html代碼保存在@ each.html文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
