描述
多个值也可以与@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>
接下来，创建文件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
接下来执行上面的命令，它将自动创建style.css文件用下面的代码：
style.css
.aqua{background-color:aqua;border:dotted;}.red{background-color:red;border:solid;}.green{background-color:green;border:double;}
输出
让我们执行以下步骤，看看上面的代码如何工作：
将上述html代码保存在@ each_multiple.html文件中。
在浏览器中打开此HTML文件，将显示如下输出。
