Sass-@each 指令

说明

在 @each 中，定义了一个变量来保存列表中每个项目的值。

语法

@each $var in <list or map>

语法如下所示，简单解释一下：

$var - 表示变量名称。@each 规则将 $var 设置为列表中的每个项目，并使用 $var 的值输出样式。
<list or map> - 这是 SassScript 表达式，将返回一个 list 或 map。

示例

以下示例演示了如何使用 @each 指令：

<html>
   <head>
      <title>Control Directives & Expressions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <p class = "p_red">This is line one.</p>
      <p class = "p_green">This is line two.</p>
      <p class = "p_yellow">This is line three.</p>
      <p class = "p_blue">This is line four.</p>
   </body>
</html>

接下来，创建文件 style.scss。

style.scss

@each $color in red, 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 文件，会显示如下所示的输出。

sass_control_directives_expressions.htm

打印页面

上一个

下一个