@talbs This was done to reduce CSS rule duplication. Do not look just at those 3 background rules. The whole picture is:

          &.muted {
            &>a {
              background-image: url('../images/mute.png');
            }
          }

          > a {
            background-image: url('../images/volume.png');
            background-position: 10px center;
            background-repeat: no-repeat;

            border-right: 1px solid #000;
            box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
            @include clearfix();
            color: #fff;
            cursor: pointer;
            display: block;
            height: 46px;
            margin-right: 0;
            padding-left: 15px;
            position: relative;
            @include transition(none);
            -webkit-font-smoothing: antialiased;
            width: 30px;

            &:hover, &:active, &:focus {
              background-color: #444;
            }
          }

If I would have used the one-line:

          background: url('../images/volume.png') 10px center no-repeat;

Then it would overwrite all background styling for

          &:hover, &:active, &:focus

and

          &>a

And for those 2 cases background would have to be fully restyled, not just <b>background-image</b> and <b>background-color</b>. This was tested both ways, with the same results. The current style of CSS rules was chosen based on personal taste to reduce code duplication.