Возможно ли реализовать подобное в Stylus?

Question

[Олег]

Привет, начал осваивать Stylus и у меня возник вопрос. Возможно ли как-нибудь автоматом собрать все селекторы где есть миксин sp, например в переменную?

$home = 20px 20px 0 0px;
$menu = 12px 12px -222px 0px;
$logo = 120px 120px -122px 0px;

sp($icon)
	width $icon[0]
	height $icon[1]
	background-position $icon[2] $icon[3]

.home
  sp($home)
  
.menu
  sp($menu)
  
.logo
  sp($logo)

Чтобы при компиляции намутить что-то подобное:

.home,
.menu,
.logo {
  background: ...;
}
.home {
  width: 20px;
  height: 20px;
  background-position: 0px 0px;
}
.menu {
  width: 12px;
  height: 12px;
  background-position: -222px 0px;
}
.logo {
  width: 120px;
  height: 120px;
  background-position: -122px 0px;
}

Answer 1

[Александр Петров]

Можно использовать +cache

$home = 20px 20px 0 0px;
$menu = 12px 12px -222px 0px;
$logo = 120px 120px -122px 0px;

sp($icon)
  width $icon[0]
  height $icon[1]
  background-position $icon[2] $icon[3]
  +cache('bg')
   background-image: url('')

.home
  sp($home)
  
.menu
  sp($menu)
  
.logo
  sp($logo)

На выходе получится именно то, как вам нужно.

Comments

[Олег]

Спасибо, Stylus прекрасен. Единственное, почему-то общие правила компилируются после первого селектора, а не перед всеми.

.home {
  width: 74px;
  height: 74px;
  background-position: -74px 0px;
}
.home,
.menu,
.logo {
  background: ....;
}
.menu {
  width: 74px;
  height: 74px;
  background-position: 0px 0px;
}
.logo {
  width: 52px;
  height: 52px;
  background-position: 0px -74px;
}