ฟังก์ชันใน SASS

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

มาสร้างฟังก์ชัน func กัน ซึ่งจะ กำหนดขนาดฟอนต์ ให้ขนาดถูกส่งผ่าน เป็นพารามิเตอร์และพารามิเตอร์จะเป็น ตัวแปร:

$font-size: 10px;

จากนั้นเขียนพารามิเตอร์ลงในฟังก์ชัน $n และต้องระบุในเนื้อความของ ฟังก์ชัน @return:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func(2);
}

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

#main {
	font-size: 20px;
}

นอกจากนี้ยังสามารถส่งอาร์กิวเมนต์ที่มีชื่อ ไปยังฟังก์ชันได้ ลองเขียนเงื่อนไขจากตัวอย่าง ก่อนหน้าใหม่:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func($n: 2);
}

และในไฟล์ styles.css เราจะเห็นโค้ดเดียวกัน:

#main {
	font-size: 20px;
}

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

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

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

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

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

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}