在@each中，定义了一个变量，其中包含列表中每个项目的值。
@each $var in <list or map>
下面简要解释语法。
$var: 它表示变量的名称。 @each规则将$var设置到列表中的每个项目，并使用值$var输出样式。
<list or map>: 这些是SassScript表达式，将返回列表或映射。
下面的例子演示了使用@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。
@each $color in red, green, yellow, blue { .p_#{$color} { background-color: #{$color}; } }
您可以通过使用以下命令让SASS查看文件，并在SASS文件更改时更新CSS：
sass --watch C:rubylibsassstyle.scss: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文件，将显示如下输出。
描述它是LESS的一个特性，它允许使用单个属性从多个属性中为逗号或空格分隔列表添加值。它可以用于背景和变换属性。下表描述了合...
CSS2 多媒体类型@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括...
CSS 表格 使用 CSS 可以大大提高 HTML 表格的外观。2020年11月2019年11月程序语言等级更改12C16.21%+0.17%23Python12.12%+2.27%3...
实例HTML5 label标签用于为 input 元素做出标记。带有两个输入字段和相关标记的简单 HTML 表单：form action="demo_form.asp" la...
