มาทำให้การเขียน CSS ง่ายขึ้น ด้วย SASS กันเถอะ
SASS คืออะไร
มัน CSS Preprocessor ตัวหนึ่งที่นิยมในปัจจุบันครับ
คำถามต่อมาคือ แล้ว CSS Preprocessor มันคืออะไรล่ะ (ฮ่าๆๆ)
CSS Preprocessor : ก็ตามชื่อมันแหละครับ มันคือการเขียน CSS ในอีกรูปแบบหนึ่ง โดยใช้หลักการเขียนโปรแกรมมาช่วย แล้วค่อย compile มาเป็น CSS ที่เราๆใช้กันแบบปกติครับ
สรุปแล้ว ไอ้เจ้า SASS ก็คือ เครื่องมือในการสร้างไฟล์ CSS มาใช้นั่นแหละครับ
มาถึงตรงนี้ หลายคนอาจจะสงสัยเพิ่มว่า
อ้าว งี้ชีวิตก็ลำบากขึ้นน่ะสิ จากเดิมที่เขียนไฟล์ CSS แล้วใช้ได้เลย นี่ต้องมาคอมพงคอมไพล์อะไรอีก
คำตอบคือ ใช่ครับ มันลำบากนิดหน่อย(คลิ๊กเมาส์ 2–3ที) ตอน compile
แต่จะช่วยเราได้มาก เมื่อไหร่ก็ตามที่เว็บไซต์เราจำเป็นต้องเปลี่ยน style,เปลี่ยนสี หรือเปลี่ยนอะไรก็แล้วแต่ ถ้าเป็น CSS ปกติ เราต้องมานั่งแก้ทีละ selector ใช่มั้ยครับจะดีกว่ามั้ยครับ ถ้าเราแก้แค่บรรทัดเดียวในไฟล์ SASS แล้ว compile เป็น ไฟล์ CSS แล้วใช้ได้เลย
เพื่อไม่เป็นการเสียเวลา เรามาดูกันดีกว่าครับ ว่า SASS เนี่ย มันทำอะไรได้บ้าง
Variables :การใช้ตัวแปร
แน่นอนครับ ในเมื่อ CSS Preprocessor มันเอาหลักการเขียนโปรแกรมมาใช้ มันก็ต้องมีตัวแปรเก็บข้อมูล โดยจะใช้เครื่องหมาย $ นำหน้าชื่อตัวแปรครับ เช่น
เมื่อ compile ออกมาแล้ว จะได้ว่า
เห็นมั้ยครับ ง่ายๆ ไม่มีอะไรซับซ้อน ^^
Nesting :การใช้ selection ซ้อนกัน
ถ้าเราต้องการ css แบบนี้
จะเห็นว่าทุกอย่างอยู่ภายใต้ nav แล้วเราจะมาเขียนทำไมหลายรอบใช่มั้ยครับ
SASS จะเขียนแบบนี้ครับ
code ดูเป็นระเบียบขึ้นเยอะ ว่ามั้ยครับ ^^
Mixins :การใช้ฟังค์ชัน
SASS มีการนำฟังค์ชันเข้ามาช่วยทำงานด้วยครับ โดยจะใช้เครื่องหมาย=เพื่อกำหนดฟังค์ชัน และใช้เครื่องหมาย+เพื่อใช้ฟังค์ชันครับ
เช่น เวลาเราอยากจะทำขอบมน กับทุกๆ browser แต่ขี้เกียจมาเปลี่ยนทุกๆ browser
เราก็มัดรวมมันไว้ในฟังค์ชันซะเลยครับ เช่น ถ้าเราอยากได้ css แบบนี้
เราก็เขียน SASS แบบนี้
เท่านี้เราก็ได้ฟังค์ชันขอบมน ไว้ใช้แล้วครับ และแน่นอนครับ มันยังใช้กับ class อื่นๆ นอกจาก .box ได้ด้วย
Extend/Inheritance :การสืบทอดการทำงาน
ฮั่นแน่!! มีการสืบทอดด้วย โดย SASS จะใช้ @extend ตามด้วย selector ที่เราต้องการให้มันเป็นแม่ครับ มาดูวิธีใช้กันครับ
จะได้ code css ว่า
จะเห็นว่า class .message, .success, .error, .warning นั้นจะเหมือนกันหมด ต่างกันแค่ สีขอบ ครับ
Operators :การคำนวณ
เราสามารถใช้การคำนวณมาช่วยทำงานได้ครับ เช่น
เขียน SASS แบบนี้
code CSS ที่จะได้ก็คงไม่ต้องเดาเน๊าะครับ จะได้แบบนี้
การ Compile
การ compile ก็จะมี software หลายตัวที่ไว้ใช้ compile SASS ครับ
ในที่นี้ผมจะใช้ Koala ครับ เหตุผลก็ง่ายๆครับ เพราะ มัน ฟรี !!! (ฮ่าๆๆ)
วิธีใช้ก็ง่ายๆ ครับ
ก่อนอื่นไปทำไฟล์ sass จากที่ไหนก็ได้ จะใช้ Notepad ก็ได้ (ฮ่าๆๆๆ) แล้ว เซฟเป็น .sass และก็เข้าโปรแกรม Koala แล้วไปเลือกจุดที่ไฟล์ .sass ของเราอยู่
แล้วคลิ๊กขวา >>compile >> รอ >> จบ
แค่นี้ เราก็ได้ไฟล์ css ที่เอาไปใช้ได้แล้วครับ เวลาเราต้องการแก้ไขอะไรก็ไปแก้ที่ ไฟล์ .sass แล้ว compile ออกมาใหม่
สรุป
ก็มีประมาณนี้แหละครับ สำหรับพื้นฐานการใช้งาน SASS และยังมีอีกหลายอย่างที่ผมยังไม่ได้พูดถึงครับ ถ้าใครสนใจล่ะก็สามารถไปลองอ่านเพิ่มเติมได้ที่เว็บไซต์ของ SASS โดยตรงได้ครับ http://sass-lang.com/
โดยในเว็บไซต์ก็จะมีโปรแกรมที่ใช้ compile ไว้ให้ดาวน์โหลดด้วยครับ ก็สามารถเข้าไปเลือกสรรได้ตามอัธยาศัยเลยครับ หวังว่าเพื่อนๆพี่ๆน้องๆจะได้รับประโยชน์จากบทความนี้บ้างนะครับ สำหรับวันนี้ สวัสดีครับ^^
