การกำหนดขอบเขตตัวแปรให้คอมโพเนนต์
กำหนดขอบเขตตัวแปร CSS ให้กับองค์ประกอบของคอมโพเนนต์เพื่อสร้างระบบรูปแบบที่แยกจากกันและนำกลับมาใช้ใหม่ได้
การกำหนดขอบเขตตัวแปรให้คอมโพเนนต์ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงควรกำหนดขอบเขตให้คุณสมบัติกำหนดเอง
คุณสมบัติกำหนดเองแบบโกลบอลมีผลกับทั้งหน้า การกำหนดขอบเขตของคุณสมบัติกำหนดเองให้กับคอมโพเนนต์จะช่วยแยกสไตล์ออกจากกัน และป้องกันการสืบทอดที่ไม่ตั้งใจระหว่างคอมโพเนนต์
ขอบเขตระดับคอมโพเนนต์
กำหนดคุณสมบัติกำหนดเองบนตัวเลือก root ของคอมโพเนนต์ ลูกหลานจะสืบทอดคุณสมบัติเหล่านี้ แต่องค์ประกอบที่อยู่นอกคอมโพเนนต์จะไม่สืบทอด
<div class="card">Scoped card variables</div>
การเขียนทับตัวแปรที่มีขอบเขต
คอมโพเนนต์สามารถกำหนดรูปแบบธีมต่าง ๆ ได้โดยเขียนทับคุณสมบัติกำหนดเองของตนเองในคลาสตัวปรับแต่ง:
<div class="card">Default</div>
<div class="card card--dark">Dark</div>
<div class="card card--blue">Blue</div>
ค่าทดแทนแบบโกลบอลพร้อมการเขียนทับเฉพาะที่
รูปแบบการออกแบบ: กำหนดค่าโกลบอลใน :root และเขียนทับค่าเฉพาะที่บนคอมโพเนนต์ คอมโพเนนต์จะใช้โทเค็นโกลบอล แต่สามารถปรับแต่งโทเค็นเหล่านั้นเฉพาะภายในคอมโพเนนต์ได้
<button>Royalblue (global)</button>
<div class="sidebar">
<button>Coral (sidebar override)</button>
</div>
ชั้นของคุณสมบัติกำหนดเองใน CSS
ระบบการออกแบบที่มีโครงสร้างดีจะมีคุณสมบัติกำหนดเองหลายชั้น:
- โทเค็นโกลบอล: ค่าดิบ เช่น สีและขนาด
- โทเค็นเชิงความหมาย: ค่าที่สื่อความหมาย เช่น --color-action
- โทเค็นของคอมโพเนนต์: ค่าที่ใช้กับคอมโพเนนต์เฉพาะ เช่น --button-bg
API ของสไตล์ในบรรทัด
เปิดเผยตัวแปรของคอมโพเนนต์เป็น API สาธารณะผ่านสไตล์ในบรรทัดจาก JavaScript หรือแอตทริบิวต์ HTML วิธีนี้ทำให้ผู้ใช้ปรับแต่งคอมโพเนนต์ได้โดยไม่ต้องแก้ไข CSS
<div class="card" style="--card-bg: pink;">
Content
</div>
การกำหนดขอบเขตด้วย @scope (รูปแบบใหม่)
กฎ at-rule @scope แบบใหม่ช่วยกำหนดขอบเขต CSS อย่างชัดเจนโดยไม่ต้องพึ่งการตั้งชื่อคลาส:
<div class="card">
<p class="title">Scoped Title</p>
<p>Card body</p>
</div>
การแยกด้วย data-theme
ใช้แอตทริบิวต์ data-theme เพื่อกำหนดขอบเขตให้ทั้งต้นไม้ย่อยใช้ธีมอื่น:
<div class="panel">Light theme (default)</div>
<div data-theme="dark" class="panel">Dark theme</div>
การป้องกันการรั่วไหล
คุณสมบัติกำหนดเองจะมีขอบเขตอยู่ที่องค์ประกอบและองค์ประกอบลูกหลานของมัน อย่างไรก็ตาม คุณสมบัติที่กำหนดบนองค์ประกอบลูกหลานจะเข้าถึงได้เฉพาะจากองค์ประกอบลูกหลานนั้นและลูกหลานของมันเองเท่านั้น จะไม่รั่วไหลไปยังองค์ประกอบแม่หรือองค์ประกอบพี่น้อง
ตัวแปรที่มีขอบเขตแบบตอบสนอง
คุณสมบัติกำหนดเองที่มีขอบเขตทำงานร่วมกับคิวรีคอนเทนเนอร์ได้อย่างยอดเยี่ยม:
<div class="card">
<div class="card__inner">
<div>Item 1</div>
<div>Item 2</div>
</div>
</div>
เอกสารประกอบโทเค็นของคอมโพเนนต์
จัดทำเอกสาร API ของคุณสมบัติกำหนดเองของคอมโพเนนต์ เพื่อให้นักพัฒนาทราบว่าควรเขียนทับตัวแปรใด รูปแบบที่ดีคือแสดงรายการตัวแปรเหล่านี้เป็นความคิดเห็นไว้ด้านบนของสไตล์ชีตของคอมโพเนนต์
ตรวจสอบความเข้าใจอย่างรวดเร็ว
มีการกำหนดคุณสมบัติกำหนดเอง --color-accent ไว้บนองค์ประกอบ .card องค์ประกอบพี่น้อง .nav จะสืบทอดตัวแปรนี้ได้หรือไม่
สรุปทบทวน
กำหนดขอบเขตคุณสมบัติกำหนดเองให้กับตัวเลือกของคอมโพเนนต์ เพื่อแยกออกจากขอบเขตโกลบอล ใช้คลาสตัวปรับแต่งเพื่อเขียนทับตัวแปรที่มีขอบเขตสำหรับรูปแบบต่าง ๆ ระบบการออกแบบจัดชั้นเป็น โทเค็นโกลบอล → โทเค็นเชิงความหมาย → โทเค็นของคอมโพเนนต์ เปิดเผยตัวแปรเป็น API ของคอมโพเนนต์เพื่อให้ปรับแต่งจากภายนอกได้
คำถามที่พบบ่อย
บทเรียน “การกำหนดขอบเขตตัวแปรให้คอมโพเนนต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดขอบเขตตัวแปรให้คอมโพเนนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดขอบเขตตัวแปรให้คอมโพเนนต์”
กำหนดขอบเขตตัวแปร CSS ให้กับองค์ประกอบของคอมโพเนนต์เพื่อสร้างระบบรูปแบบที่แยกจากกันและนำกลับมาใช้ใหม่ได้ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การกำหนดขอบเขตตัวแปรให้คอมโพเนนต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การประกาศและใช้งานคุณสมบัติกำหนดเอง
- ค่าทางเลือกและ var()
- การกำหนดขอบเขตตัวแปรให้คอมโพเนนต์
- การอัปเดตตัวแปรด้วย JavaScript