set or shift background image via css/less for firefox - css

Question

I have the below which works really well for all browsers except Firefox.
Basically it loads a background sprite image and positions it depends on the classes. Is there a work around for Firefox or a better way?
example page - http://smf.jynk.net/events/making-progress-boosting-the-skills-and-wage-prospects-of-the-low-paid/
.social__icon--share{
.svg-bg('smf-site-icons-02',#position: -200px -200px) ;
.single-publications &{
background-position-y: -200px;
}
.single-events &{
background-position-y:-400px;
}
.single-post &{
background-position-y:-600px;
}
display: inline-block;
width: 31px;
height: 31px;
&.social__icon--share--twitter{
background-position-x: -200px;
}
&.social__icon--share--facebook{
background-position-x: -800px;
}
&.social__icon--share--google{
background-position-x: -1000px;
}
&.social__icon--share--linkedin{
background-position-x: -1200px;
}
&.social__icon--share--pinterest{
background-position-x: -1400px;
}
}

Answer 1

Found a workaround with a mixing -
.bgpos(#ypos) {
&.social__icon--share--twitter{
background-position: -200px #ypos;
}
&.social__icon--share--facebook{
background-position: -800px #ypos;
}
&.social__icon--share--google{
background-position: -1000px #ypos;
}
&.social__icon--share--linkedin{
background-position: -1200px #ypos;
}
&.social__icon--share--pinterest{
background-position: -1400px #ypos;
}
}
// icons.less
.single-publications &{
.bgpos(-200px);
}
.single-events &{
.bgpos(-400px);
}
.single-post &{
.bgpos(-600px);
}