
เกี่ยวกับคอร์สนี้ |
---|
เรียนคอร์สนี้ได้ 365 วัน |
มีทั้งหมด 7 บทเรียน |
วิดีโอความยาว 1 ชั่วโมง 5 นาที |

Cloud Tutorial
สอนเขียน CSS ด้วย Sass ฉบับมือใหม่
คอร์สเรียนการเขียน CSS และ CSS3 ด้วย Sass สำหรับหรือมือใหม่
โดย ทัพพ์วริศ ชิณศิริรัตน์กุล
สวัสดีครับก่อนจะเริ่มเรียนในคอร์ส สอนเขียน CSS ด้วย Sass นี้เราก็มาคุยกันก่อนเล็กๆน้อยๆนะครับ อันดับแรกเลยการที่เราจะทำเว็บไซต์ให้สวยงามเนี่ย เราคงใช้แค่ภาษา Html อย่างเดียวไม่ได้ใช่มั้ยครับ ? ดังนั้นเราจึงต้องใช้ CSS เข้ามาช่วย CSS หรือ Cascade Style Sheet เป็นภาษาสำหรับใช้ในการจัดการองค์ประกอบต่างๆของหน้าเว็บไซต์เราให้สวยงามโดยการกำหนด selector ในรูปแบบต่างๆตามที่เราต้อง โดยการเขียน CSS นั้นก็ไม่ได้ยุ่งยากอะไรมากมาย เพียงแต่ว่า ปัจจุบันนี้มีเครื่องมือที่เรียกว่า CSS Preprocessor เข้ามาช่วยให้การเขียน CSS นั้นสะดวกสบายยิ่งขึ้นนะครับ
CSS Preprocessor คืออะไร ?
ความหมายของ CSS Preprocessor ก็ตามชื่อมันเลยนะครับต้องมีการ Process ก่อนจึงจะใช้งานได้นั่นก็หมายความว่าเราจะเขียน CSS ของเราในอีกรูปแบบนึง จากนั้นพอเราจะใช้งานเราก็นำมันมาทำการ Process ก่อน หรือเราจะเรียกว่าทำการ Compile เพื่อนำมาใช้งานนั่นเอง โดย Sass ก็เป็นหนึ่งใน CSS Preprocessor นะครับ แล้ว Sass คืออะไร ?
Sass คืออะไร ?
Sass ชื่อเต็มๆคือ Syntactically Awesome Stylesheets เป็น CSS Proprocessor อีกหนึ่งตัวซึ่งกำลังเป็นที่นิยมทั่วโลกในไทยเองก็มีผู้เริ่มใช้บ้างแล้ว และเจ้าตัว Sass เนี่ยมันมีดียังไงทำไมเราถึงต้องเรียนมัน ผู้อ่านคงอยากรู้ถึงประโยชน์และข้อดีของมันแล้วใช่มั้ยครับ ?
<ความสามารถของ Sass
ความสามารถหลักของ Sass ก็จะคล้ายๆกับ CSS Preprocessor ทั่วๆไปนะครับโดยจะเป็นเรื่องของ
- Nested
- Variables
- Mixins
- Inheritance / Extend
- Operations
ข้อดีที่ทำให้ Sass เหนือกว่า CSS Preprocessor ตัวอื่นๆ
- Sass ทำงานบน Ruby จึงทำให้ประสิทธิภาพตอนเขียนโค๊ดและการประมวลผลเร็วกว่าเจ้าอื่นๆ แน่นอน
- Sass มีชุดคำสั่งหรือ Library ให้เราเลือกใช้มากมายซึ่งจะช่วยให้การเขียน CSS ของเรานั้นง่ายขึ้นมาก
- Sass มี 2 รูปแบบให้เลือกเขียนทั้ง .sass และ .scss
- .scss มีรูปแบบการเขียนเหมือน CSS ทั่วไปทำให้ง่ายต่อการศึกษา
บทเรียน การเขียน CSS ด้วย Sass |
เวลา(นาที) |
|
---|---|---|
ตอนที่ 1 - Sass คืออะไร ? | 6.05 | |
ตอนที่ 2 - เริ่มใช้งาน Sass | 11.05 | |
ตอนที่ 3 - การใช้งาน Nested | 18.03 | |
ตอนที่ 4 - การใช้งาน Variables | 12.00 | |
ตอนที่ 5 - การใช้งาน Mixins | 12.42 | |
ตอนที่ 6 - การใช้งาน Operators | 2.16 | |
ตอนที่ 7 - การใช้งาน Extend/Inheritance | 3.34 |
รีวิวคอร์สจากผู้เรียน
-
Sarunsak Phonwa
-
Varich Boonsanong
-
Sathaporn Thissarak
-
อภินันท์ วงค์อินต๊ะวัง
-
เพชรพลอย จิรชัยสกุล
-
Sky Fall