# SCSS ตอนที่ 1 --- ## content ในตอนนี้ที่เราจะพูดถึงกันนะครับ - พูดไปเรื่อย - SCSS คืออะไร - SCSS หรือ SASS อะไรดี --- หลังจากลองใช้งาน SCSS มาได้ซักพัก จึงได้ความว่า ควรจะเขียนให้ละเอียดซักนิดเพื่อตัวเองจะได้ไม่เมา .... --- ดังนั้นขอเกริ่นนำสักเล็กน้อย --- SCSS คืออะไร --- SCSS หรือ SASS นั้นเป็น CSS Preprocessor จะว่าง่ายๆก็คือ ภาษาโปรแกรมสำหรับเขียน CSS นั่นเอง มันทำไรได้ --- เจ้า SCSS เนี่ย สามารถทำให้เราเขียน CSS ในรูปแบบฟังก์ชั่น ได้ แจ๋วเลยซาร่า) แปลว่า เราสามารถสร้างต้นแบบ สำหรับCSS ได้ แทนที่จะต้อง ก็อบ-วาง แบบเมื่อก่อน (ซึ่งปัจจุบันก็ทำ :smile: บางครั้งบางคราว เบาๆจ้า ) --- เราสามารถใช้ ==Loop==, ==if else== หรือ เก็บค่าต่างๆไว้ในตัวแปร แล้วนำมาคำนวนค่า เพื่อความสะดวกรวดเร็วในการใช้งาน --- และแน่นอนว่าก่อนเราจะเอามาใช้งาน เราจำเป็นต้องทำให้มันกลายเป็น CSS แบบปกติๆ เสียก่อน ซึ่งไม่ยาก ==จริงๆ== :+1: --- ==SCSS หรือ SASS อะไรดี==  > แถม css มาหน่อย เดียวน้อยใจ --- สิ่งที่แตกต่างของทั้ง2 คือ =={ }== และ ==;== --- <style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style> - <code class="orange">SASS นั้นเป็นรุ่นที่เกิดมาก่อน และ ไม่รองรับ { } วงเล็บปีกกา และ ; ทำให้อาจจะขัดหูขัดตาคนที่เพิ่งเปลี่ยนจากการเขียน CSS ตรงๆ มาเป็น SASS ดังนั้นจึงมีรุ่นใหม่ออกมาอีก 1 รุ่น นั่นคือ SCSS</code> - <code class="blue">SCSS เป็นรุ่นที่ต้องใช้ { }ในการครอบชุดคำสั่งส่วนต่างๆ และ ; ปิดท้ายบรรทัด ทำให้การเขียนแทบไม่ต่างจาก CSS ปกติเลย ก็อป CSS ปกติมาวาง ยังได้!!!</code> --- <code>เราใช้ นามสกุลไฟล์ เพื่อบอกว่า โค๊ตที่เราเขียนนั้น ใช้แบบไหน ==SASS== หรือ ==SCSS== คราวนี้ใครจะเขียนแบบไหนก็แล้วแต่ชอบนะครับ </code> --- เดี๋ยวรอ ตอนที่ 2 นะครับ [มาแล้ว SCSS ตอนที่ 2](https://hackmd.io/@UKzvUDqaSgyvoBvj0MfI6A/rJB2dS0HU) ---