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> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <p class="aqua">This is line one.</p> <p class="red">This is line two.</p> <p class="green">This is line three.</p> </body> </html>
接下来，创建文件style.scss。
style.scss
@each $color, $border in (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文件，将显示如下输出。
