Sprite’s i wiele teł

W czasach kiedy jeszcze studiowałem, na ćwiczeniach pojawiło się zadanie - napisać aplet którego głównymi bohaterami były drożdże. Minęło już dużo czasu od tego momentu ale hipnotyczne właściwości tej prostej aplikacji nie osłabły. Zdecydowałem sie więc na przepisanie jej na javascript'a - http://glorpen.pl/projects/yeast.

Tła przedstawiały stany danego pola i nie musiały występować same, tak więc potrzebowałem ustawić wiele teł dla pojedynczego elementu. Niestety jak na razie CSS nie wspiera rozszerzania deklaracji background. Napisałem więc następującego mixin’a:

@mixin yeast-background($theme, $args...){
  $positions: ();
  $backgrounds: ();

  @each $v in $args {
      $positions: append($positions, sprite-position($theme, $v), comma);
      $backgrounds: append($backgrounds, $theme, comma);
  }

  background: $backgrounds;
  background-position: $positions;
}

Jego użycie:

$theme: sprite-map("projects/yeast/themes/normal/*.png");

@include yeast-background($theme, background);

&.grass {
      @include yeast-background($theme, food, background);
  }
  &.carnivore {
      @include yeast-background($theme, thing, background);
  }
}

Co po skompilowaniu da nam mniej więcej coś takiego:

#project-yeast .app.normal td.grass {
 background: url('/static/img/projects/yeast/themes/normal-s1b3c760646.png'), url('/static/img/projects/yeast/themes/normal-s1b3c760646.png');
 background-position: 0 -64px, 0 -160px;
}
#project-yeast .app.normal td.carnivore {
 background: url('/static/img/projects/yeast/themes/normal-s1b3c760646.png'), url('/static/img/projects/yeast/themes/normal-s1b3c760646.png');
 background-position: 0 -96px, 0 -160px;
}