Sass - @each 多重赋值

说明

使用 $var1、$var2、$var3、... 在 <list> 中，也可以将多个值与 @each 指令一起使用。

语法

@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 文件，将显示如下所示输出。

sass_control_directives_expressions.htm

打印页面

前一个

下一个