แนะนำให้รู้จัก Sass กับชีวิต Front-end ที่สะดวกสบายขึ้น (ตอนที่ 1)
สวัสดีนักพัฒนาหน้าใหม่ทุกท่าน หากคุณเป็นคนที่อยู่ในวงการการพัฒนาเว็บมาอย่างยาวนานคงจะรู้จักสิ่งที่จะได้อ่านต่อไปนี้เป็นอย่างดี แต่สำหรับผู้ที่พึ่งเริ่มต้นศึกษาหรือผู้ที่มีความสนใจการพัฒนาเว็บไวต์สิ่งต่อไปนี้เป็นสิ่งที่จะทำให้ชีวิตนักพัฒนาของคุณสะดวกสบายขึ้นอย่างแน่นอน สิ่งที่เราจะพูดถึงนั่นก็คือ Sass นั่นเองครับ
ซึ่งในซีรี่ส์ Sass ที่ท่านจะได้อ่านต่อไปนี้เราก็จะเริ่มสอนตั้งแต่เริ่มต้นวิธีการลง(ตอนนี้) แล้วหัวข้อหรือฟีตเจอร์หลักๆของเจ้า Sass โดยจะมีด้วยกันทั้งหมด 8 ตอนซึ่งตอนสุดท้ายเราก็จะสอนเขียนหน้าเว็บจากที่เราได้เรียนรู้กันมาพร้อมทั้งเปรียบเทียบ Sass กับ CSS ให้เห็นกันจะจะกันไปเลย
ในการเขียนหน้าเว็บ HTML เรามักจะใช้ CSS ช่วยในการสร้างหน้าตาของไฟล์ HTML ซึ่งในปัจจุบัน CSS เริ่มที่จะไม่ดีสำหรับการเขียนหน้าเว็บใหญ่ๆ เพราะมีโค้ดที่ยาวและดูยุ่ง ทำให้มีการสร้างภาษา CSS แบบใหม่ ที่ช่วยให้การเขียนมีความสั้น มีระบบและซับซ้อนน้อยลง ซึ่งก็คือ LESS และ Sass
Sass คืออะไร
Sass (Syntactically Awesome Stylesheets) คือเครื่องมือที่ช่วยให้การทำงานกับ CSS ง่ายขึ้นเป็นภาษาสไตล์ชีตภาษาหนึ่งเปรียบเสมือนเป็น CSS Preprocessor ซึ่งทำงานคล้ายกับ LESS CSS
การเขียน Sass นั้นจะเขียนคล้าย ๆ กับ CSS แต่ Sass จะมีฟังก์ชั่นเพิ่มขึ้นมาช่วยให้เขียนได้ง่ายขึ้นเช่น
- Variables มีตัวแปรที่สามารถใช้เก็บข้อมูลเช่น สี ฟอนต์ แล้วเรียกใช้ซ้ำได้เรื่อยๆ
- Nesting เหมือน HTML ที่มีการทำงานแบบนี้แต่ CSS ไม่มี
- Partials สามารถแบ่งส่วนไฟล์แล้วเรียกใช้ภายหลังได้ ทำให้ง่ายต่อการจัดการ
- Import ไม่เหมือน CSS ที่จะมีการส่ง html request ทุกครั้ง แต่ Sass จะรวมไว้ให้ในครั้งแรกที่เรียกใช้ไฟล์
- Mixins ช่วยให้สามารถเก็บ CSS Declaration เอาไว้เป็นชุดๆ เพื่อนำไปใช้ต่อในส่วนอื่นๆซึ่งง่ายต่อการใช้งานมากกว่า CSS ปกติ
- Extend/Inheritance ช่วยให้คุณสามารถที่จะแชร์เซ็ทของ properties จาก selector หนึ่งไปยังอีกตัวหนึ่งได้อย่างง่ายดาย
- Operators การกำเนินการทางคณิตศาสตร์สามารถทำได้ใน Sass เช่น
+,-,*,/, และ%
โดยเมื่อเขียน Sass เสร็จแล้วก็สามารถ Compile เป็นไฟล์ CSS เพื่อเอาไปใช้งานได้ตามปกติ
สอนการติดตั้ง Sass
ก่อนอื่นนั้นเข้าไปที่เว็บไซต์หลักของ Sass กันเลย คลิก เมื่อเข้าไปแล้วท่านจะเห็นว่า Sass มีวิธีการติดตั้งด้วยกัน 2 แบบนั่นคือ
- Applications
- Command Line
ซึ่งแบบแรกจะเป็นแอพพลิเคชั่นที่มีการติดตั้ง Sass อยู่แล้วภายในหลากหลายแพลทฟอร์มเช่น Mac, Windows, และ Linux ซึ่งส่วนมากแล้วจะเป็นแอพที่ต้องเสียค่าใช้จ่ายแต่หากท่านสนใตก็คุ้มค่าที่จะจ่ายครับ
ฉะนั้นวันนี้เราจะมาสอนลง Sass แบบที่สองให้ทุกท่านกัน โดยลงวินโดวส์นะครับ
1. Ruby Installer
2. Set path สำหรับ Command Line
3. ลง Sass
Gulp.js
Gulp เป็นภาษา JavaScript ภาษาหนึ่งที่ open-source สามารถโหลดมาใช้งานกันได้อย่างฟรีๆ ซึ่งถ้าจะให้เปรียบ Gulp เปรียบเสมือนตัวช่วยที่จะช่วยทำงานทุกอย่างแทนเรา ตัวอย่างสิ่งที่มันสามารถทำได้เช่น Compile, Minify, Combine และ Refesh
ซึ่งก่อนที่เราจะสามารถทำงานกับ Sass ได้ เราต้องมีเครื่องมือในการทำการ Compile Sass ให้เป็น CSS เสียก่อน และเราก็จะใช้เจ้า Gulp นี่แหละทำงานนี้ให้ดับเรา
ก่อนอื่นเลยท่านต้องลง Node.js ก่อน สามารถดาวน์โหลดได้ที่นี่เลยครับ
ไม่เหมือนกับ Ruby ที่ต้องมีการ Set path แต่หากไม่สามารถทำตามรูปสุดท้ายนี้ได้ ก็ลอง set path เหมือนของการลง Sass ขั้นตอนที่ 2 ได้เลยครับ เป็นอันเรียบร้อย!
SCSS
SCSS นั้นก็คือ Sass เพียงแต่แตกต่างกันเพียงแค่ syntax เท่านั้นเพียงแค่เพิ่มวงเล็บปีกกา {…} และเครื่องหมาย semicolin (;) ขึ้นมา เพราะ SCSS จะมี Syntax ที่คล้ายคลึงกับ CSS มากกว่าทำให้ผู้พัฒนาปรับตัวได้เร็วกว่าในการมาใช้ Sass ฉะนั้นจากนี้ไปจะขอยกตัวอย่างเป็นโค้ด SCSS นะครับ
รวบยอด
ตอนนนี้ทุกท่านคงจะเห็นภาพรวมของสิ่งที่กำลังจะเจอกันแล้ว Sass คืออะไรแล้วเราจะเรียนรู้อะไรเกี่ยวกับมันบ้าง รวมถึงการเตรียยมทรัพยากรเพื่อพร้อมใช้งาน Sass นั่นคือการลง Ruby เพื่อใช้งาน Sass แล้วการลง Node.js เพื่อใช้งาน gulp ที่ทำหน้าที่ compile Sass-> CSS และรวมถึงเราได้กล่าวถึง SCSS ที่เหมือนกับ Sass แต่ปรับเปลี่ยน syntax ให้คล้ายเดิมกับ CSS เพื่อให้ผู้ใช้งานได้เปลี่ยนมาใช้ Sass ได้ง่ายขึ้น
