ตัวอย่างการตกแต่งหน้าเว็บด้วย scss จาก sass (ตอนที่ 8)
เมื่อเรารู้ความสามารถของ sass เพียงพอแล้ว คงถึงเวลาที่เราจะสร้างผลงานเป็นหน้าเว็บออกมาซักชิ้นแล้ว ในตอนนี้ เราจะสร้างหน้าเว็บขึ้นมาชิ้นนึง ซึ่งจะเริ่มตั้งแต่การสร้างไฟล์เริ่มต้นที่จำเป็นกันเลย
เราจะมาลองเขียนหน้าเว็บสำหรับการล็อคอินกัน (เฉพาะส่วนของหน้าเว็บเท่านั้น ยังไม่มีการเชื่อมไปถึงฝั่งหลังบ้าน)
การเตรียมไฟล์สำหรับ generate ไฟล์ css ด้วย gulp
เราจะใช้ gulp จากตอนที่ 1 ในการทำให้ไฟล์ scss กลายเป็นไฟล์ css ซึ่งจำเป็นต้องใช้ gulpfile ตามนี้
นำ gulpfile ไปไว้ในโฟลเดอร์ project ของเรา แล้วให้เปิด cmd ที่โฟลเดอร์นั้น จากนั้นลง tools ต่อไปนี้
- local gulp: ด้วยคำสั่ง
> npm install gulp - gulp-sass: ด้วยคำสั่ง
> npm install gulp-sass --save-dev - browser-sync ด้วยคำสั่ง
> npm install browser-sync
การเขียน source code สำหรับหน้าเว็บ
เมื่อเตรียม gulp เสร็จแล้ว ขั้นต่อไปคือการเขียน html ให้เขียนเฉพาะโครงสร้างที่จำเป็น จากตัวอย่างข้างบน จะได้ไฟล์ html ตามนี้
ในตอนนี้ ถ้าเปิดหน้าเว็บนี้ขึ้นมา จะเห็นกล่อง input สำหรับกรอก username และ password กับปุ่ม Login ซึ่งเราสามารถใช้หน้าเว็บนี้ส่งข้อมูลให้ฝั่งหลังบ้านได้แล้ว แต่ว่าหน้าตาของหน้าเว็บยังไม่สวย
ก่อนอื่นในการแต่งหน้าเว็บเราจะเขียนไฟล์ setting หรือไฟล์ config ที่ใช้เก็บค่าที่สามารถเปลี่ยนแปลงได้ไว้ก่อน (ไม่จำเป็นต้องมี แต่มีเผื่อไว้ดีกว่า เพื่อความเป็นระเบียบและง่ายตอนมาแก้ทีหลัง)
ต่อไปเป็นการตกแต่งหน้าเว็บโดยจัดให้ container อยู่ตรงกลาง ใส่ font, background image และใส่ class สำหรับตกแต่งช่อง input กับ button เข้าไป จะได้ไฟล์ scss ประมาณนี้
แต่ตอนนี้ ในไฟล์ html เราเรียกไฟล์ master.css ไม่ใช่ index.scss เนื่องจาก html ไม่สามารถลิ้งค์เปิดไฟล์ scss ได้ เราจึงต้องสร้างไฟล์ master.scss มา เพื่อให้ gulp สร้างไฟล์ master.css ให้
ข้อระวังคือ เราควร import ไฟล์ setting ก่อนจะ import ไฟล์ index เพราะในไฟล์ index เราใช้ค่าบางอย่างที่อยู่ในไฟล์ setting ด้วย (ไม่งั้น complier จะแจ้ง error ว่าไม่รู้จักค่าที่ไฟล์ index เรียก)
แค่นี้หน้าตาของเว็บเราก็จะสวยงามขึ้นมาทันที และการเขียนโค้ดจะง่ายและดูเป็นระเบียบมากกว่าการเขียนด้วย css มาก
