Sass คำอธิบาย

ที่คุณควรรู้

ก่อนที่จะเริ่มต้น คุณควรมีความเข้าใจฐานของ

  • HTML
  • CSS

หากคุณต้องการเรียนรู้วิชาเหล่านี้ก่อน โปรดเข้าชม หน้าหลัก เข้าชมเรื่องนี้

อะไรคือ Sass?

  • Sass หมายถึง Syntactically Awesome Stylesheet (สไตล์เซตต์ที่มีภาษาที่ดีมาก)
  • Sass คือ CSS แบบขยาย
  • Sass คือ CSS ไฟล์เปิดภาษาก่อน
  • Sass สนับสนุนเวอร์ชันทั้งหมดของ CSS
  • Sass ลดการซ้ำความเป็นสีของ CSS ซึ่งทำให้เรียบร้อยและประหยัดเวลา
  • Sass ถูกออกแบบโดย Hampton Catlin และพัฒนาโดย Natalie Weizenbaum ในปี 2006
  • Sass สามารถดาวน์โหลดและใช้งานฟรี

ทำไมคุณต้องใช้ Sass?

สไตล์เซตต์มีขนาดใหญ่ขึ้น ซับซ้อนขึ้น และยากที่จะดูแลขึ้นมากขึ้น นี่เป็นที่ที่ CSS ไฟล์เปิดภาษาก่อน (preprocessor) สามารถช่วยเหลือ

Sass อนุญาตให้คุณใช้คุณสมบัติที่ CSS ไม่มี อย่างเช่น ตัวแปร กฎนับราย มิกซิน นำเข้า ติดตาม ฟังก์ชันในลักษณะเดิม และคุณสมบัติอื่นๆ

ตัวอย่างง่ายและมีประโยชน์ของ Sass

ของเรามีเว็บไซต์ที่มีสีหลักสามสี

#a2b9bc
#b2ad7f
#878f99

แล้วคุณจะต้องพิมพ์ค่า HEX นี้เพียงกี่ครั้ง? มากมาย แล้วหากสีที่เหมือนกันเปลี่ยนแปลงเช่นไร?

คุณสามารถเขียนโค้ด Sass ต่อไปนี้ แทนที่จะพิมพ์ค่าดังกล่าวหลายครั้ง

ตัวอย่าง Sass

/* กำหนดตัวแปรสำหรับสีตัวเดิม */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* ใช้ตัวแปร */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

ดังนั้น ในการใช้ Sass หากสีตัวเดิมเปลี่ยนแปลง คุณเพียงแค่เปลี่ยนแปลงในจุดเดียว

Sass ทำงานอย่างไร?

เบราเซอร์ไม่เข้าใจรหัส Sass ดังนั้นคุณจะต้องใช้ตัวประปรึกษา Sass ที่จะแปลรหัส Sass ให้เป็น CSS มาตรฐาน

กระบวนการนี้เรียกว่า transpiling หรือการปรับเปลี่ยนรหัส (transpiling) ดังนั้นคุณจะต้องให้รหัส Sass แก่โปรแกรมที่ใช้ในการปรับเปลี่ยนรหัส (transpiler) และเอารหัส CSS กลับมา

คำแนะนำ:การปรับเปลี่ยนเป็นคำว่าภาษาเดียวกันหรือภาษาอื่นหมายถึงการแปลรหัสที่เขียนด้วยภาษาหนึ่งเป็นรหัสที่เขียนด้วยภาษาอื่น

ประเภทแบบภาพแฟ้ม Sass

การแก้ไขของแบบภาพแฟ้มของแบบที่ใช้สำหรับ Sass คือ ".scss"。

ความเห็น Sass

Sass สนับสนุนความเห็นแบบ CSS มาตรฐาน /* comment */นอกจากนี้ยังสนับสนุนความเห็นที่ภายในตัวเลือกเช่นกัน // comment:

ตัวอย่าง Sass

/* กำหนดสีหลัก */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* ใช้ตัวแปร */
.main-header {
  background-color: $primary_1; // คุณสามารถเพิ่มความเห็นที่ภายในตัวเลือกได้
}