เกี่ยวกับคอร์สนี้
เรียนคอร์สนี้ได้ 365 วัน
มีทั้งหมด 7 บทเรียน
วิดีโอความยาว 1 ชั่วโมง 5 นาที
เกี่ยวกับผู้สอน
ทัพพ์วริศ ชิณศิริรัตน์กุล
Cloud Tutorial

ผู้ก่อตั้ง เว็บไซต์ cloud-tutorial.com เพื่อเป็นแหล่งสอนน้องๆนักเรียน นักศึกษา หรือผู้ที่สนใจในการออกแบบพัฒนาเว็บไซต์ โดยการสอนผ่านรูปแบบ วิดีโอ ฟรี โดยเนื้อหาส่วนมากจะเป็นการสอนด้วยเครื่องมือใหม่ๆ ซึ่งนิยมในต่างประเทศแต่ในไทยยังไม่แพร่หลาย เพื่อให้คนไทยได้รู้จักคุ้นเคยและใช้ในการทำงานจริง

สอนเขียน CSS ด้วย Sass ฉบับมือใหม่

คอร์สเรียนการเขียน CSS และ CSS3 ด้วย Sass สำหรับหรือมือใหม่

โดย ทัพพ์วริศ ชิณศิริรัตน์กุล
แชร์คอร์สนี้บน Social:
เข้าเรียนฟรี

สวัสดีครับก่อนจะเริ่มเรียนในคอร์ส สอนเขียน 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  
ไม่มีเอกสารประกอบการเรียน

รีวิวคอร์สจากผู้เรียน

4
2
0
0
0
เฉลี่ย
4.6/5.0
  • เยี่ยมเลย เข้าใจง่ายมากครับ
    Sarunsak Phonwa

  • สวดยอด
    Varich Boonsanong

  • ขอบคุณสำหรับความรู้ดีๆครับเข้าใจง่ายมากๆ
    Sathaporn Thissarak

  • แจ่มมากๆครับสำหรับคอร์สเริ่ม โปรแกรมใช้งานง่ายแล้วก็อธิบายเข้าใจง่ายดี
    อภินันท์ วงค์อินต๊ะวัง

  • ดีมากเลยค่ะ ขอบคุณนะคะ :)
    เพชรพลอย จิรชัยสกุล

  • เข้าใจง่าย คนสอนพูดรู้เรื่อง ใครที่สนใจไม่ต้องลังเล เข้ามาฟังเลยครับ สาระ 100%
    Sky Fall