หัก: ค่าที่คำนวณได้

ตัวเลือกที่ 1: (รองรับเบราว์เซอร์ที่ดีกว่า)

Less ไม่สามารถรับค่าจากคุณสมบัติที่กำหนดไว้ก่อนหน้าและดำเนินการทางคณิตศาสตร์กับคุณสมบัตินั้นได้ ด้วยเหตุนี้เราจึงต้องคำนวณและกำหนดค่าให้กับทรัพย์สินด้วยตนเอง เนื่องจากคุณใช้ตัวแปรอยู่แล้ว การเปลี่ยนแปลงโค้ดจึงควรเป็นเรื่องง่าย (ตามด้านล่าง):

@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;
    }        
  }
}

ที่สามารถบีบอัดเพิ่มเติมได้โดยใช้ลูปและตัวแปร @index (หากค่า X เพิ่มขึ้นตามปัจจัยเดียวกันสำหรับแต่ละรายการ)

ด้านล่างนี้คือการดำเนินการตามวิธีการที่จะได้ผล อย่างที่คุณเห็น องค์ประกอบ 4 div ทั้งหมดมีภาพพื้นหลังแบบไล่ระดับสี โดยที่ 28px แรกถ่ายด้วยสีเดียว และ 28px ที่เหลือถ่ายด้วยสีอื่น

สำหรับผู้ที่ไม่มีคลาสที่เลือก สีที่สองจากการไล่ระดับสีจะปรากฏขึ้น (เนื่องจากตำแหน่ง Y คือ -28px) และสำหรับผู้ที่มีคลาสที่เลือก สีแรกจากการไล่ระดับสีจะปรากฏขึ้น (เนื่องจากตำแหน่ง Y คือ -56px และการไล่ระดับสีตาม ค่าเริ่มต้นจะถูกทำซ้ำ)

.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>

ตัวเลือกที่ 2: (การรองรับเบราว์เซอร์ที่แย่กว่า - มีแผนภูมิความเข้ากันได้ของเบราว์เซอร์ ที่นี่)

อีกสิ่งหนึ่งที่เราสามารถทำได้ในตอนนี้ด้วยมาตรฐานพื้นหลังและเส้นขอบระดับ 4 คือการแบ่ง background-position ทั้งหมดออกเป็น x และ y ส่วน เพื่อจะได้ไม่ต้องทำซ้ำตำแหน่ง x เดิมทีสิ่งนี้ถูกลบออกจากข้อมูลจำเพาะ CSS3 แต่ดูเหมือนว่าจะสามารถใช้งานได้ในขณะนี้ตามที่กล่าวไว้ ที่นี่

@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;
        }        
    }
}

ด้านล่างนี้คือการใช้งานแนวทางนี้โดยเราจะแทนที่เฉพาะค่า background-position-y ด้วยตัวเลือกที่เฉพาะเจาะจงมากขึ้น:

.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>

สิ่งนี้ไม่สามารถแก้ไขได้ด้วยการเพิ่มคลาสอื่น (.selected) ให้กับตัวเลือก .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;
    }
}

หมายเหตุ
.wave.selected ต้องอยู่หลังตัวเลือก .wave เนื่องจากอันสุดท้ายจะแทนที่คุณสมบัติ CSS