Mixins ใน SASS

ในบทเรียนนี้เราจะทำความรู้จักกับ mixins (การผสม) ซึ่งอนุญาตให้รวมคลาสหนึ่งเข้าไปในอีกคลาสหนึ่งได้ ลองมาทำความเข้าใจว่า มันคืออะไรและวิธีการทำงานกับมัน

โดยพื้นฐานแล้ว การผสมคือการใช้คลาสหนึ่งภายในอีกคลาสหนึ่ง เมื่อคลาสหนึ่งทำหน้าที่เป็นแม่แบบ - เป็นโค้ดส่วนหนึ่งที่กำหนดไว้ ซึ่งเราสามารถใช้ได้ในหลายสถานที่

สิ่งนี้สะดวกอย่างไร? ใน CSS ล้วนๆ เราจำเป็นต้อง พิมพ์แม่แบบโค้ดในทุกที่ที่ต้องการ แต่ใน SASS เราสามารถเขียนมันไว้ที่เดียว แล้วจึงเรียกใช้ในตำแหน่งของโค้ดที่ต้องการ

สำหรับการประกาศ mixins เราใช้ directive @mixin ตามด้วย ชื่อของมัน, พารามิเตอร์ และบล็อกส่วนเนื้อหา:

@mixin mix {
	width: 100px;
	height: 100px;
}