เครื่องมือแปลง CSS เป็น SCSS/Sass

เครื่องมือนี้คืออะไร?

ตัวแปลงออนไลน์ฟรีนี้ช่วยให้คุณแปลง CSS เป็น SCSS หรือ indented Sass ได้ทันที เหมาะสำหรับนักพัฒนาที่กำลังเปลี่ยนไปใช้สไตล์ชีทแบบโมดูลาร์ที่ทันสมัยพร้อมฟีเจอร์อย่างตัวแปรและการซ้อน

วิธีการใช้งาน

1. วางโค้ด CSS ของคุณลงในตัวแก้ไขหรืออัปโหลดไฟล์
2. คลิก Convert เพื่อแปลงเป็น SCSS หรือ Sass
3. ดาวน์โหลด คัดลอก หรือแชร์ผลลัพธ์ที่แปลงแล้วของคุณ

คุณยังสามารถ ลงชื่อเข้าใช้ด้วย 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.