ฟังก์ชันใน LESS

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

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

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

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

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

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

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

p {
	.fs(20px);
}

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

p {
	font-size: 20px;
}

สร้างฟังก์ชัน w() ที่จะ กำหนดความกว้างให้องค์ประกอบ

สร้างฟังก์ชัน h() ที่จะ กำหนดความสูงให้องค์ประกอบ