---
# System prepended metadata

title: SCSS ตอนที่ 1 มารู้จัก SCSS กันสักหน่อย พอไปวัดไปวาได้
tags: [' CSS', SCSS]

---

---
title: SCSS ตอนที่ 1 มารู้จัก SCSS กันสักหน่อย พอไปวัดไปวาได้
tags: SCSS, CSS
description: "SCSS เบื้องต้น"
---

# SCSS ตอนที่ 1 

---

## content ในตอนนี้ที่เราจะพูดถึงกันนะครับ 

- พูดไปเรื่อย
- SCSS คืออะไร
- SCSS หรือ SASS อะไรดี

---

หลังจากลองใช้งาน SCSS มาได้ซักพัก จึงได้ความว่า ควรจะเขียนให้ละเอียดซักนิดเพื่อตัวเองจะได้ไม่เมา ....

---

ดังนั้นขอเกริ่นนำสักเล็กน้อย

---

SCSS คืออะไร

---

SCSS หรือ SASS  นั้นเป็น CSS Preprocessor จะว่าง่ายๆก็คือ ภาษาโปรแกรมสำหรับเขียน CSS นั่นเอง  มันทำไรได้

---

เจ้า SCSS เนี่ย สามารถทำให้เราเขียน CSS ในรูปแบบฟังก์ชั่น ได้ แจ๋วเลยซาร่า)
แปลว่า เราสามารถสร้างต้นแบบ สำหรับCSS ได้  แทนที่จะต้อง ก็อบ-วาง แบบเมื่อก่อน (ซึ่งปัจจุบันก็ทำ :smile:  บางครั้งบางคราว เบาๆจ้า ) 

---

เราสามารถใช้ ==Loop==, ==if else== หรือ เก็บค่าต่างๆไว้ในตัวแปร  แล้วนำมาคำนวนค่า เพื่อความสะดวกรวดเร็วในการใช้งาน

---

และแน่นอนว่าก่อนเราจะเอามาใช้งาน เราจำเป็นต้องทำให้มันกลายเป็น CSS แบบปกติๆ เสียก่อน ซึ่งไม่ยาก ==จริงๆ== :+1: 

---

==SCSS หรือ SASS อะไรดี==

![](https://lh5.googleusercontent.com/proxy/98dgJZ-eAVEI4w3iUJDaM7tg4x6l9Pf_QLtc3zzrj6uRshl-T4NPjIDVCbs11JWd3AtCSFkNNK61xRw2ja5XeKQemM08_9E_t0XTOCmK_w8)
    
> แถม 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)

---