Sass Variable ใช้แล้วใช้อีก เก็บได้ง่ายขึ้นเมื่อเป็นตัวแปร (ตอนที่ 2)

Variable คือหนึ่งวิธีในการเพิ่มค่าหรือข้อมูลให้กับสิ่งต่างๆที่สามารถทำการเรียกซ้ำได้เรื่อยๆหรือที่เราเรียกว่า ตัวแปร ตัวอย่างของค่าที่เราจะสามารถพบได้ CSS เช่น

• Color เป็น rgb(66, 134, 244) หรือ #4286f4
• Text มี font-size เป็น 16px
• Text มี font-family เป็น Arial
• Opacity เป็น 0.8

จะเห็นว่าค่าต่างๆที่ยกตัวอย่างจะสามารถเก็บไว้ในตัวแปรได้หมดไม่ว่าจะเป็นค่า ตัวเลข รูปแบบของฟอนต์ หรือค่าต่างๆทั้งหมดใน CSS ซึ่งใน Sass การสร้างตัวแปรจะใช้สัญลักษณ์ Dollar

$

ตัวอย่างการใช้งาน

CSS

SCSS

แต่การเลือกชื่อการให้ตัวแปรบางครั้งก็เป็นเรื่องที่ยาก!

ฉะนั้นเราจะแนะนำเทคนิคการตั้งชื่อตัวแปรที่เข้าใจได้ง่ายทั้งต่อผู้พัฒนาเอง คนในทีม หรือผู้พัฒนาคนอื่นๆมาอ่านก็สามารถเข้าใจได้ ไปดูกันเลยดีกว่า

การตั้งชื่อตัวแปร

ในการตั้งชื่อตัวแปร เรามักจะตั้งตัวแปรให้เป็นคำหรือคีย์เวิร์ดซึ่งในบางครั้งนานๆไปกลับมาดูอีกทีก็จะไม่เข้าใจ ฉะนั้นการตั้งชื่อควรตั้งชื่อให้เป็นภาษาหรือประโยคที่สามารถอ่านแล้วเข้าใจได้

ตัวอย่างการตั้งชื่อ

// Bad
$blue: blue;
$green: green;

// Better
$brand-color: blue;
$accent-color: green;

การเพิ่มคีย์เวิร์ดเพื่อให้ให้เข้าใจได้ง่าย โดยนำต่อท้าย เช่น -color

// Base colors
$base-color: #353638;
$brand-color: blue;
$accent-color: green;

หรือเพิ่มเข้าไปข้างหน้าเช่น header- หรือ footer-

// Header
$header-height: 180px;
$header-background-color: $color-brand;

// Footer
$footer-height: 500px;
$footer-background-color: rgb(165, 26, 100);

เทคนิคการตั้งชื่อนั้นยังมีอีกมากมายหลากหลายวิธีที่ไม่จำกัดอยู่เพียงเท่านี้ ซึ่งหลักการตั้งชื่อนั้นไม่ได้มีอะไรตายตัว ทั้งนี้ขึ้นอยู่กับความชอบใจของคนตั้งเอง เทคนิคเหล่านี้เป็นเพียงข้อตกลงที่สามารถทำให้ไม่ว่าใครก็สามารถเข้าใจได้ ซึ่งผู้อ่านเองสามารถคิดวิธีอีกหลากหลายวิธีที่ดีกว่านี้ก็ได้เช่นกันครับ