ใช้ให้คุ้มไปเลยกับ Mixin ของ Sass (ตอนที่ 5 )

มาถึงสิ่งที่เจ๋งที่สุดของความสามารถ Sass นั่นคือความสามารถในการเขียนโค้ดที่สามารถนำมาใช้ได้อีกเรื่อยๆ โดย mixin นี้จะมีความคล้ายคลึงกับ macro ในภาษาอื่น ซึ่งถ้าคุณเคยเขียนโปรแกรมมาก่อนแล้วละก็คงจะคุ้นเคยมาบ้าง เราสามารถคิดได้ว่ามันคือฟังก์ชันๆหนึ่ง ที่มีการเรียกใช้ แต่คอนเซ็พ์ทของ mixin คือการสร้างโค้ดขึ้นมาตอนที่เรทำการ compile ไม่ใช่เป็นการ execute โค้ดตอน run time ในภาษาอื่น

การใช้ mixin จะทำโดยการใช้ คำสั่ง @mixin จากนั้นตามด้วยชื่อของ mixin ซึ่งโค้ดตัวอย่างด้านล่างมีชื่อว่าborder-radius สามารถเขียนให้มีสัญลักษณ์หรือตัวเลขด้วยได้โดยห้ามมีการเว้นวรรค จากนั้นตามด้วยการรับ argument ของ mixin อยู่ภายในวเล็บ (…) จากตัวอย่างจะเห็นว่า mixin นี้รับเพียง argument เดียวนั่นคือ $radiusถ้ามีมากกว่านี้ก็เพียงคั่นด้วยเครื่องหมาย comma (,)

จากนั้นจะตามด้วยสิ่งที่เราอยากให้ mixin นี้ทำโดยอยู่ภายในวงเล้กปีกกา {…} จากโค้ดตัวอย่างจะเห็นว่า mixin นี้ประกอบไปด้วย CSS attribute ต่างๆ นั่นคือเมื่อให้ค่ารัศมีในแต่ละครั้ง mixin นี้ก็จะทำการตั้งค่าต่างๆสี่รอบ ซึ่งวิธีนี้ค่อนข้างมีประสิทธิภาพเพราะสามารถช่วยป้องกันการพิมพ์ผิดหรือลืมตั้งค่าต่างๆได้นั่นเองและแน่นอนไม่ต้องพิมพ์เยอะด้วย

นอกจากนี้คุณสามารถเพิ่มความสามารถเพิ่มให้ mixin ได้อีกด้วยการตั้ง default argument ณ ที่นี้คือค่า $radiusดังเช่น

@mixin border-radius($radius: 5px) {
  ...
}

การทำอย่างนี้จะทำให้ mixin สับสนได้ ฉะนั้นต้องเพิ่มส่วนนี้เข้าไปด้วย

@include border-radius;

การทำแบบนี้จะทำให้ค่าเริ่มต้นของรัศมีที่เราต้องการเป็น 5px ตามที่เราตั้งไว้

Which would output the attributes with the default value in the argument list of the declaration. In this case 5px because that's what we declared above.

Another trick that can be quite useful is to declare a variable beforehand and use that as the default value for the mixin: