Kurang: nilai terhitung

Opsi 1: (Memiliki dukungan browser yang lebih baik)

Less tidak dapat mengambil nilai dari properti yang ditentukan sebelumnya dan melakukan operasi matematika apa pun terhadapnya. Oleh karena itu, kita harus menghitung dan menetapkan nilai properti secara manual. Karena Anda sudah menggunakan variabel, perubahan kode seharusnya sangat sederhana (diberikan di bawah):

@image-ui-wave-width: 28px;
@image-ui-tab-height: 28px;
.wave {
  &.saw {
    background-position: -@image-ui-tab-height * 2 -@image-ui-tab-height;
    &.selected{
      background-position: -@image-ui-tab-height * 2 -@image-ui-tab-height * 2;
    }
  }
  &.triangle {
    background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height;
    &.selected{
      background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height * 2;
    }        
  }
}

Itu dapat dikompresi lebih lanjut dengan menggunakan loop dan variabel @index (jika nilai X meningkat dengan faktor yang sama untuk setiap item).

Di bawah ini adalah implementasi bagaimana hal itu akan berhasil. Seperti yang Anda lihat, keempat elemen div memiliki gambar latar belakang gradien di mana 28 piksel pertama diambil oleh satu warna dan 28 piksel lainnya diambil oleh warna lainnya.

Bagi mereka yang tidak memiliki kelas yang dipilih, warna kedua dari gradien akan ditampilkan (karena posisi Y adalah -28px) dan bagi mereka yang memiliki kelas yang dipilih, warna pertama dari gradien ditampilkan (karena posisi Y adalah -56px dan gradien sebesar default diulang).

.wave.saw {
  background-position: -56px -28px;
}
.wave.saw.selected {
  background-position: -56px -56px;
}
.wave.triangle {
  background-position: -84px -28px;
}
.wave.triangle.selected {
  background-position: -84px -56px;
}
.wave.saw {
  width: 56px;
  height: 28px;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  background-size: 56px 56px;
}
.wave.triangle {
  width: 56px;
  height: 28px;
  background-image: linear-gradient(to bottom, yellow 50%, orange 50%);
  background-size: 56px 56px;
}
div {
  margin-bottom: 20px;
}

<div class='wave saw'></div>

<div class='wave saw selected'></div>

<hr>

<div class='wave triangle'></div>

<div class='wave triangle selected'></div>

Opsi 2: (Dukungan browser yang lebih buruk - Bagan Kompatibilitas Browser tersedia di sini)

Hal lain yang bisa kita lakukan sekarang dengan Standar Latar Belakang dan Batas Level 4 adalah membagi keseluruhan background-position menjadi x dan y sehingga posisi x tidak perlu diulang. Ini awalnya dihapus dari spesifikasi CSS3 tetapi tampaknya tersedia sekarang seperti yang disebutkan di sini.

@image-ui-wave-width: 28px;
@image-ui-tab-height: 28px;

.wave {
    &.saw {
        background-position: -@image-ui-tab-height * 2 -@image-ui-tab-height;
        &.selected{
            background-position-y:  -@image-ui-tab-height * 2;
        }
    }
    &.triangle {
        background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height;
        &.selected{
            background-position-y: -@image-ui-tab-height * 2;
        }        
    }
}

Di bawah ini adalah implementasi pendekatan ini di mana kita hanya mengganti nilai background-position-y dengan pemilih yang lebih spesifik:

.wave.saw {
  background-position: -56px -28px;
}
.wave.saw.selected {
  background-position-y: -56px;
}
.wave.triangle {
  background-position: -84px -28px;
}
.wave.triangle.selected {
  background-position-y: -56px;
}
.wave.saw {
  width: 56px;
  height: 28px;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  background-size: 56px 56px;
}
.wave.triangle {
  width: 56px;
  height: 28px;
  background-image: linear-gradient(to bottom, yellow 50%, orange 50%);
  background-size: 56px 56px;
}
div {
  margin-bottom: 20px;
}

<div class='wave saw'></div>

<div class='wave saw selected'></div>

<hr>

<div class='wave triangle'></div>

<div class='wave triangle selected'></div>

Bisakah ini diselesaikan dengan menambahkan kelas lain (.selected) ke pemilih .wave?

.wave {
    [yourcode]
}
.wave.selected {
    &.saw {
        background-position: -@image-ui-tag-height * 2 -@image-ui-tab-height * 2;
    }
    &.triangle {
     background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height * 2;
    }
}

Catatan
.wave.selected harus berada setelah pemilih .wave karena pemilih terakhir akan menggantikan properti css.