Андрей Б.

Где то у вас ошибка, скорее всего в путях.
У меня спрайты генерируются аналогичным способом.

Исходники:
Есть папка /images в ней у меня две папки под два разных шаблона одного сайта, допустим /sprite-1 и / sprite-2
В каждой папке свои изображения.

Далее:
1. Делаете два таска с разными названиями
2. В gulp.src указываете для каждого таска свой путь на исходники
3. В imgName указываете разное название, оно будет записываться в шаблон
4. В cssName указываете разные названия генерируемого файла с переменными, иначе он будет перезаписываться.
5. Путь до шаблона .mustache оставляете одинаковым

Выдача:
/img
--/sprite-1
--/sprite-2

Единственное что не нравится, это разные выдаваемые папки, в одну почему-то не получилось скидывать, ну и то что два разных таска.

В идеале хотелось бы имеет умный генератор, который смотрел бы на названия файлов исходников и разбивал бы на спрайты, можно задавать префиксы и не париться. Плюс максимальное количество "включенных" в спрайт изображений, а то разбухает.

$(".stringly").click(
        function() {
            $(".stringly").removeClass("allocation"); // Сначала удаляем предыдущее выделение
            $(this).addClass("allocation");
        }
);

.container {
   > .div{
      font-size: 16px;
   }
}
//или
.container {
   & > .div{
      font-size: 16px;
   }
}

Вангую что для обертки этих двух блоков указан overflow: hidden;

Самый простой способ - объединить изображения.

scss и с единицами измерений умеет делать вычисления, т.е. в вашем случае будет 30px

UPD
Есть оказывается такое, делается так

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

strip-units(10px) // вернет 10

.language-switcher ul {
   margin: 0;
}

a {
   outline: none;
}

На github иконки сделаны шрифтом, логотип в том числе.