ฟังก์ชันใน LESS

ในบทเรียนนี้เราจะพิจารณาวิธีการใช้ ฟังก์ชัน ฟังก์ชันมีความคล้ายคลึงกับการ mix-in บางอย่าง แต่ในขณะเดียวกันก็อนุญาตให้เพิ่มพารามิเตอร์ ซึ่งสามารถเปลี่ยนค่าของพวกมันได้

พารามิเตอร์เหล่านี้ถูกส่งในวงเล็บ ของฟังก์ชัน ลองดูตัวอย่าง

มาสร้างฟังก์ชัน fs ที่ จะตั้งค่าขนาดฟอนต์ ขนาด ถูกส่งผ่านพารามิเตอร์ ในฐานะที่เป็นพารามิเตอร์ จะเป็นตัวแปร ซึ่งชื่อของมันเรา คิดขึ้นตอนประกาศฟังก์ชัน:

styles.less.fs(@size) {
  // ตรงนี้จะเป็นโค้ดของฟังก์ชัน
}

มากำหนดภายในฟังก์ชันว่าค่าของพารามิเตอร์ของเราควร ถูกแทรกที่ไหน:

styles.less.fs(@size) {
  font-size: @size;
}

มาเรียกใช้ฟังก์ชันของเรา โดยส่ง พารามิเตอร์เป็นขนาดที่ต้องการขององค์ประกอบ:

styles.lessp {
  .fs(20px);
}

ผลลัพธ์หลังจากการคอมไพล์ ขนาดฟอนต์ ของย่อหน้าจะเท่ากับค่าที่กำหนด:

styles.cssp {
  font-size: 20px;
}