ฟังก์ชัน calc ใน LESS

มาสร้างฟังก์ชันที่ทำงานเป็นตัวครอบ เหนือฟังก์ชัน CSS calc กัน ให้ฟังก์ชันของเรารับพารามิเตอร์แรก เป็นชื่อคุณสมบัติ และพารามิเตอร์ที่สองเป็นค่าที่คำนวณได้:

styles.less.calc(@name, @calc) {
  @{name}: calc(@calc);
}

ลองใช้ฟังก์ชันของเราดู:

styles.lessp {
  .calc(width, ~'10px + 30%');
}

ผลลัพธ์หลังการคอมไพล์:

styles.cssp {
  width: calc(10px + 30%);
}

styles.lessp {
  .calc(width, ~'10px + 30%');
  .calc(height, ~'10px + 30%');
}