編程教程sass教程 Sass @each多個分配
描述
多個值也可以與@each指令一起使用，如<list>中的$ var1，$ var2，$ var3，...。
語法
@each$var1,$var2,$var3...in<list>
下面簡要解釋語法。
$var1,$var2和$var3:這些表示變量的名稱。
<list>:它表示列表的列表，每個變量將保存子列表的元素。
例子
下面的示例演示了如何使用帶有多個值的@each指令：
<html><head><title>Control Directives & Expressions</title><linkrel="stylesheet"type="text/css"href="style.css"/></head><body><pclass="aqua">This is line one.</p><pclass="red">This is line two.</p><pclass="green">This is line three.</p></body></html>
接下來，創(chuàng)建文件style.scss。
style.scss
@each$color,$borderin(aqua,dotted),(red,solid),(green,double){.#{$color}{background-color:$color;border:$border;}}
您可以通過使用以下命令讓SASS查看文件，并在SASS文件更改時更新CSS：
sass--watch C:\ruby\lib\sass\style.scss:style.css
接下來執(zhí)行上面的命令，它將自動創(chuàng)建style.css文件用下面的代碼：
style.css
.aqua{background-color:aqua;border:dotted;}.red{background-color:red;border:solid;}.green{background-color:green;border:double;}
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：
將上述html代碼保存在@ each_multiple.html文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
