SASS为@each指令提供多个赋值和映射。我们将从下表中逐一讨论它们。
描述
在@each中，定义了一个变量，该变量包含列表中每个项目的值。
语法
@each $var in <list or map>
语法简要说明如下-
- $ var-它代表变量的名称。@each规则将$ var设置到列表中的每个项目，并使用$ var的值输出样式。
- <list或map> -这些是SassScript表达式，将返回列表或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;
}@each多个分配
描述
多个值也可以使用@each指令像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;
}@each多个分配
描述
多重分配可与地图很好地配合使用，它们被视为成对列表。如果要使用地图，则必须更改@each语句并使用多个分配。
语法
@each $var1, $var2 in <map>
语法简要说明如下：
- $ var1，$ var2-这些代表变量的名称。
- <map> -代表配对列表。
例
以下示例演示了对地图使用多重分配：
<html>
<head>
<title>Control Directives & Expressions</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>Welcome to Tutorialspoint</p>
<h2>Welcome to Tutorialspoint</p>
<h3>Welcome to Tutorialspoint</p>
</body>
</html>接下来，创建文件style.scss。
style.scss
@each $header, $color in (h1: red, h2: green, h3: blue) {
#{$header} {
color: $color;
}
}您可以使用以下命令，让SASS监视文件并在SASS文件更改时更新CSS：
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，执行以上命令；它将使用以下代码自动创建style.css文件：
style.css
h1 {
color: red;
}
h2 {
color: green;
}
h3 {
color: blue;
}作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1704.html
