Hugo大师在understand Sass lists和ADVANCED SASS LIST FUNCTIONS两篇文章中详细分析了Sass中list的功能，但在Sass中还有一个特性非常的有意思——变量插值。不管是列表，还是变量甚至说@if,@for,@each都是Sass中基础部分，仅从一个方面来看，并不能展示出Sass的魅力。反过来说，如果能将这几个部分结合在一起，那么将会给你的开发带来强大的方便性。今天我们就以Sass的变量作为话题的开端，来讨论Sass中变量配合其他功能另一用法。

在CSS的开发中，我们都在讨论OOCSS的使用，但其最终还是无法逃脱创建一些不使用的CSS代码。我们希望的是使用这些类产生的样式，需要的时候就产生CSS代码，不需要的时候就不产生CSS代码。希望做到的是真正按需生产，不产生额外的CSS代码。

存在的问题

来看一个典型的案例——Font Awesome图标制作，为了使用这个图标库里面的图标，在CSS的常规制作中，我们必须得将其样式导入进来。可是，很多时候，我们只需要其中的几个图标，换句话说，我只想给要的图标在样式中产生代码。在CSS中，我们无法实现，为了使用这个库，我们必须添加所有的图标类以及对应的相关代码。如此一来造成很多不需要的代码。

.icon-glass:before {
  content: "\f000";
}
.icon-music:before {
  content: "\f001";
}
.icon-search:before {
  content: "\f002";
}
.icon-envelope-o:before {
  content: "\f003";
}
.icon-heart:before {
  content: "\f004";
}
.icon-star:before {
  content: "\f005";
}
...

那么今天，我们就要来解决这个问题。

所需要的参数

欲解决上面提到的问题，我们在具体介绍详细的解决方案之前，我们需要一些参数。在Sass中，只要未调用，他是不会产生额外代码。此处我们主要借助Sass中的变量和列表来发力。

变量

大家都知道Font Awesome图标是通过字体来实现的，而其中每个图标都有其自身的实体编码，如"\f000"、"\f001"等等。当中就会有很多重复的代码，需要修复这些重复代码，我们就需要通过变量列表。首要条件是我们需要声明一些变量，我们把这些变量放在_variables.scss文件中。

$icon-glass: "\f000";
$icon-music: "\f001";
$icon-search: "\f002";
$icon-envelope-o: "\f003";
$icon-heart: "\f004";
$icon-star: "\f005";

列表

接下来，我们需要一个列表，方便后面的遍历。注意，变量插值不能直接通过Sass的内部指令来控制。我想要一个带有选择器