การซ้อนตัวแปรและไฟล์ย่อย
ใช้ตัวแปร Sass สำหรับค่าที่นำกลับมาใช้ใหม่ได้ ซ้อนตัวเลือกเพื่อให้อ่านง่าย และแยกโค้ดเป็นไฟล์ย่อย
การซ้อนตัวแปรและไฟล์ย่อย เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
Sass คืออะไร
Sass (สไตล์ชีตที่มีไวยากรณ์ยอดเยี่ยม) คือเครื่องมือประมวลผลล่วงหน้าสำหรับ CSS ที่เพิ่มความสามารถต่าง ๆ เช่น ตัวแปร การซ้อน มิกซ์อิน ฟังก์ชัน และอื่น ๆ ให้กับ CSS ไฟล์ Sass จะถูกคอมไพล์เป็น CSS มาตรฐาน
ไวยากรณ์ Sass สองแบบ
Sass มีรูปแบบไฟล์สองแบบ:
.scss— ไวยากรณ์ส่วนขยายที่เข้ากันได้กับ CSS (ได้รับความนิยมมากที่สุด).sass— ไวยากรณ์ที่ใช้การเยื้อง (ไม่มีวงเล็บปีกกาหรืออัฒภาค)
บทเรียนนี้ครอบคลุม SCSS
ตัวแปร Sass
ตัวแปร Sass ใช้คำนำหน้า $ ตัวแปรเหล่านี้จะถูกประมวลผลในเวลาคอมไพล์ ต่างจากคุณสมบัติแบบกำหนดเองของ CSS ตรงที่ตัวแปรเหล่านี้ไม่ใช่ค่าที่เปลี่ยนแปลงได้แบบสดในเบราว์เซอร์
<button class="button">Sass Variables</button>
ตัวแปร Sass กับคุณสมบัติแบบกำหนดเองของ CSS
ข้อแตกต่างสำคัญ:
- ตัวแปร Sass: ประมวลผลในเวลาคอมไพล์ ไม่อยู่ในเบราว์เซอร์ และเปลี่ยนขณะทำงานไม่ได้
- คุณสมบัติแบบกำหนดเองของ CSS: ทำงานแบบสดในเบราว์เซอร์ เปลี่ยนแปลงได้ด้วย JS และคำนึงถึงการสืบทอดแบบลำดับชั้น
แนวทางสมัยใหม่คือใช้ทั้งสองแบบ ตัวแปร Sass เหมาะกับตรรกะขณะสร้าง ส่วนคุณสมบัติแบบกำหนดเองของ CSS เหมาะกับการเปลี่ยนธีมขณะทำงาน
การซ้อน
Sass อนุญาตให้ซ้อนตัวเลือกไว้ภายในกันและกัน โดยเลียนแบบโครงสร้าง HTML ผลลัพธ์หลังคอมไพล์จะใช้ตัวเลือกองค์ประกอบสืบทอด
<div class="card">
<div class="card-title">Card title</div>
<div class="card-body">Card body text</div>
</div>
ตัวเลือกแม่ &
& ใช้อ้างถึงตัวเลือกแม่ จึงช่วยให้สร้างรูปแบบคล้าย BEM และตัวเลือกสถานะได้:
<button class="button">Button</button>
<button class="button active">Active state (font-weight: bold)</button>
<button class="button--primary">BEM modifier: button--primary</button>
<span class="button__icon">🔗</span> BEM element: button__icon
คำเตือนเกี่ยวกับระดับการซ้อน
หลีกเลี่ยงการซ้อนที่ลึกเกิน 3 ระดับ การซ้อนลึกจะสร้างตัวเลือกที่เจาะจงมากเกินไปและทำให้ CSS เปราะบาง หากพบว่าต้องซ้อนลึก สถาปัตยกรรม CSS ก็น่าจะต้องปรับโครงสร้างใหม่
ไฟล์บางส่วนของ Sass
ไฟล์บางส่วนคือไฟล์ Sass ที่ชื่อขึ้นต้นด้วยขีดล่าง (_card.scss) ไฟล์บางส่วนจะไม่ถูกคอมไพล์แยกกัน แต่ต้องนำเข้าไปในไฟล์อื่น วิธีนี้ช่วยป้องกันการสร้างไฟล์ผลลัพธ์ CSS ที่ไม่ต้องการ
@use สำหรับการนำเข้า
Sass สมัยใหม่ใช้ @use เพื่อนำเข้าไฟล์บางส่วน โดยมีการจัดเนมสเปซเพื่อหลีกเลี่ยงความขัดแย้งของตัวแปร:
<h2 class="heading">Namespaced heading (t.$primary-color)</h2>
@forward สำหรับไลบรารี
@forward ส่งออกสมาชิกของโมดูลซ้ำ เพื่อให้ไฟล์ที่นำเข้าไลบรารีของคุณสามารถใช้งานสมาชิกเหล่านั้นได้:
<span class="badge">Forwarded token (lib.$primary-color)</span>
@import แบบเดิม (เลิกใช้แล้ว)
คำสั่ง @import แบบเก่าถูกเลิกใช้แล้วใน Dart Sass ควรย้ายไปใช้ @use และ @forward เพื่อการจัดเนมสเปซและประสิทธิภาพที่ดีกว่า
ตรวจสอบความเข้าใจ
Sass สร้างตัวเลือก CSS ใดจากการซ้อน .nav { .link { color: white; } }
สรุปทบทวน
ตัวแปร Sass ($name) จะถูกประมวลผลในเวลาคอมไพล์ การซ้อนจะเลียนแบบโครงสร้าง HTML แต่ควรหลีกเลี่ยงการซ้อนลึกเกิน 3 ระดับ & ใช้อ้างถึงตัวเลือกแม่สำหรับคลาสเทียม สถานะ และตัวปรับแต่งแบบ BEM ไฟล์บางส่วน (_file.scss) จะถูกนำเข้า ไม่ได้ถูกคอมไพล์โดยตรง ควรใช้ @use (ไม่ใช่ @import) สำหรับการโหลดโมดูล Sass สมัยใหม่
คำถามที่พบบ่อย
บทเรียน “การซ้อนตัวแปรและไฟล์ย่อย” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การซ้อนตัวแปรและไฟล์ย่อย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การซ้อนตัวแปรและไฟล์ย่อย”
ใช้ตัวแปร Sass สำหรับค่าที่นำกลับมาใช้ใหม่ได้ ซ้อนตัวเลือกเพื่อให้อ่านง่าย และแยกโค้ดเป็นไฟล์ย่อย คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การซ้อนตัวแปรและไฟล์ย่อย” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การซ้อนตัวแปรและไฟล์ย่อย
- มิกซินและการรวม
- ตัวเลือก Extend และ Placeholder
- ฟังก์ชัน Sass และลำดับการควบคุม