เริ่มต้นรู้จักกับ Dynamic CSS

Style Sheet หรือ CSS เป็นส่วนที่ทำการตกแต่งให้หน้าเว็บของเราดูสวยงาม แต่ในการทำงานจริง Style Sheet จะมีความวุ่นวายเยอะมาก ซึ่งทำให้การจะแก้ไข Style Sheet ต้องใช้เวลาเป็นอย่างมาก

ดังนั้นจึงมีแนวคิดที่จะสร้าง Framework ขึ้นมาเพื่อที่จะทำการ generate Style Sheet ออกมาให้เรา โดยใช้วิธีการเขียนที่เรียบง่ายกว่า Style Sheet จริงๆมาก โดยในปัจจุบันจะมีอยู่ 2 ค่ายหลักๆ คือ

  • LESS
  • Sass

ทั้ง LESS และ Sass เป็น Dynamic Style Sheet ทั้งคู่ แต่ LESS จะมีข้อดีกว่าตรงที่ จะสามารถ render ในฝั่ง Client ด้วย JavaScript ได้ด้วย ส่วน Sass นั้นจะต้องทำการ render ที่ฝั่งของ server เพียงอย่างเดียว

ทั้ง LESS และ Sass นั้นถูกหยิบเอาไปใช้ใน Framework ต่างๆอย่างมากมาย เช่น Bootstrap หรือ JavaScript Framework อย่าง ExtJs

ข้อดีของการใช้ Dynamic Stylesheet คือเราสามารถเขียน Style Sheet ได้เหมือนกับการเขียนโปรแกรม มีการประกาศตัวแปร มีการใส่วงเล็บซ้อนกันได้ (Nested) โดยที่เราสามารถอ่านและทำความเข้าใจ LESS และ Sass ได้ไม่ยากนัก