.avatar-user {
  display: block;
  background-size: cover;
  background-image: url(../images/user-avatar-1.svg);
}
$avatars-bg: 1,2,3,4,5,6;
$avatars: (
  letter-A: "1",
  letter-B: "2",
  letter-C: "3",
  letter-D: "4",
  letter-E: "5",
  letter-F: "6",
  letter-G: "1",
  letter-H: "2",
  letter-I: "3",
  letter-J: "4",
  letter-K: "5",
  letter-L: "6",
  letter-M: "1",
  letter-N: "2",
  letter-O: "3",
  letter-P: "4",
  letter-Q: "5",
  letter-R: "6",
  letter-S: "1",
  letter-T: "2",
  letter-U: "3",
  letter-V: "4",
  letter-W: "5",
  letter-X: "6",
  letter-Y: "1",
  letter-Z: "2",
  letter-0: "3",
  letter-1: "4",
  letter-2: "5",
  letter-3: "6",
  letter-4: "1",
  letter-5: "2",
  letter-6: "3",
  letter-7: "4",
  letter-8: "5",
  letter-9: "6",  
);

@each $name in $avatars-bg {
  .avatar-user-bg-#{$name} {
    background-image: url(../images/user-avatar-#{$name}.svg);
  }
}

@each $name, $icon in $avatars {
  .#{$name} {
    @extend .avatar-user-bg-#{$icon};
  }
}