你有一个列表，你想根据列表里的每个项目，去生成特定的样式，这个时候我们就可以使用 @each 指令，先用一个 @each ... 然后是一个表示列表里的项目的变量 ... 后面是一个 in ... 接着是要循环执行的列表 ...

这里我们先去定义一个表示列表的变量 ... 比如叫它 $icons ... 它的值是一个列表 ... 每个项目之间使用空格分隔开 ... success error warning ... 我们想根据这个列表里的项目去生成一些样式 ..

输入 @each ... 然后是表示列表里的项目的变量 ... 这里可以叫它 $icon ... 这个变量的名字你可以随便去定义 .. in ... 后面是列表 ... 我们用 $icons 来表示这个列表 ... 再输入一组括号 ... {}

在花括号里，可以根据列表里的项目去输出选择器，还有属性的值 ... 先加上一个前缀 .icon ... 然后用 interpolation 的形式，去输出当前的列表里的项目 ... #{$icon} ... 在这块样式里，再添加一个 background-image 这个属性 ... 在它的值里面，我们也可以用到列表项目的值 ... 注意 url() 里面的东西被认为是字符串，所以，要输出变量的值的话，也需要使用 interpolation 的形式 ..

background-image: url(../images/icons/#{$icon}.png);

保存 ... Sass 会根据列表里的项目，分别输出对应的样式 ... 第一个项目是 success ... 对应输出的选择器是 .icon-success ... 它的 background-image 属性的值里面，也会用到这个项目的值 ...

@each 这个指令接着会去处理列表里的第二个项目 .. 也就是 error ... 最后会去处理 warning 这个项目 ...