CSS to SCSS/Sass Converter
แปลงโค้ด CSS เป็น SCSS/SASS หรือกลับกัน
เครื่องมือนี้คืออะไร?
ตัวแปลงออนไลน์ฟรีนี้ช่วยให้คุณแปลง CSS เป็น SCSS หรือ indented Sass ได้ทันที เหมาะสำหรับนักพัฒนาที่กำลังเปลี่ยนไปใช้สไตล์ชีทแบบโมดูลาร์ที่ทันสมัยพร้อมฟีเจอร์อย่างตัวแปรและการซ้อน
วิธีการใช้งาน
- วางโค้ด CSS ของคุณลงในตัวแก้ไขหรืออัปโหลดไฟล์
- คลิก Convert เพื่อแปลงเป็น SCSS หรือ Sass
- ดาวน์โหลด คัดลอก หรือแชร์ผลลัพธ์ที่แปลงแล้วของคุณ
คุณยังสามารถ ลงชื่อเข้าใช้ด้วย Google หรือ GitHub เพื่อบันทึกและจัดการประวัติการแปลงของคุณ
CSS คืออะไร?
CSS (Cascading Style Sheets) เป็นพื้นฐานของการออกแบบเว็บ มันควบคุมรูปลักษณ์และความรู้สึกของเว็บไซต์ กำหนดเลย์เอาต์ สี ฟอนต์ ระยะห่าง แอนิเมชัน และการตอบสนอง
ตัวอย่าง CSS:
p {
color: red;
text-align: center;
}
เรียนรู้เพิ่มเติมที่ คู่มือ CSS ของ W3Schools.
SCSS คืออะไร?
SCSS เป็นไวยากรณ์ที่เข้ากันได้กับ CSS ของ Sass ที่มีพลังเพิ่มเติม: ตัวแปร, การซ้อน, mixins, และ ฟังก์ชัน SCSS ใช้นามสกุล .scss
และได้รับการยอมรับอย่างกว้างขวางในโครงการ frontend ขนาดใหญ่
ตัวอย่าง SCSS:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Sass คืออะไร?
Sass (Syntactically Awesome Stylesheets) เป็น preprocessor ที่ขยาย CSS ด้วยฟีเจอร์ขั้นสูง มีสองไวยากรณ์:
- SCSS: คล้าย CSS มีวงเล็บและเซมิโคลอน
- Sass: ใช้การย่อหน้า ไม่มีวงเล็บหรือเซมิโคลอน
Sass ช่วยให้นักพัฒนาเขียนสไตล์ชีทที่ DRY, ดูแลรักษาง่าย, และขยายได้สำหรับโครงการที่ซับซ้อน
ตัวอย่าง Sass (Indented):
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
ทำไมต้องแปลง CSS เป็น SCSS/Sass?
- โครงสร้างโค้ดที่สะอาดและเป็นระเบียบ
- ส่วนประกอบที่ใช้ซ้ำได้ด้วย mixins และตัวแปร
- การดูแลรักษาและการปรับปรุงที่ง่ายขึ้น
สำรวจ Sass และ SCSS อย่างละเอียดที่ เอกสารทางการของ Sass.