How can I reduce this .less call to one line per image
I don't see anything wrong with what you are doing but. it can be written shorter just as you asked.

.SBtnM(@selector, @urlprefix, @width, @height)
{
   .@{selector}
   { 
       .toolbarbutton &gt; &amp;
       {
            @url: %("%s_normal.png", @urlprefix);
            width: @width;
            height: @height;
            background-image:url(@url);
       }
       .toolbarbutton:hover &gt; &amp;
       {
            @url:%("%s_rollover.png", @urlprefix);
            background-image:url(@url);
       }
       .toolbarbutton[checked="true"] &gt; &amp;
       {
             @url:%("%s_pressed.png", @urlprefix);
            background-image:url(@url);
       }
   }
}

.SBtnM(btnCSS1, 'chrome://xtoolbar/skin/img1', 42px, 24px);


For me this produces:

.toolbarbutton &gt; .btnCSS1 {
  width: 42px;
  height: 24px;
  background-image: url("chrome://xtoolbar/skin/img1_normal.png");
}
.toolbarbutton &gt; .btnCSS1 {
  background-image: url("chrome://xtoolbar/skin/img1_rollover.png");
}
.toolbarbutton[checked="true"] &gt; .btnCSS1 {
  background-image: url("chrome://xtoolbar/skin/img1_pressed.png");
}


Works for LESS 1.3.1+ ONLY. For previous versions the syntax is slightly different.