CSS ตัวแปรที่ครอบคลุม

ทำให้ตัวแปรท้องที่ทับตัวแปรทั่วไป

จากหน้าที่แล้วเราได้รู้ว่าเราสามารถเข้าถึง/ใช้ตัวแปรทั่วไปทั้งหมดในเอกสาร และตัวแปรท้องที่สามารถใช้ได้เฉพาะใน selector ที่ประกาศตัวแปรนั้น

ดูตัวอย่างในหน้าที่แล้ว:

ตัวอย่าง

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

ทดสอบเอง

บางครั้ง เราอาจต้องการให้ตัวแปรเปลี่ยนค่าเฉพาะส่วนใดส่วนหนึ่งของหน้าเว็บ

หากเราต้องการให้ตัวแปร button ใช้สีสีน้ำเงินตาลที่ต่างออกไป พวกเราสามารถประกาศตัวแปร --blue ใน selector button อีกครั้งเพื่อนะ ขณะที่เราใช้ var(--blue) ใน selector นี้ มันจะใช้ค่า --blue ที่ประกาศในที่นี้

เราเห็นว่าตัวแปรท้องที่ --blue จะทำให้ตัวแปร --blue ทั่วไปของ element button หายไป:

ตัวอย่าง

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

ทดสอบเอง

เพิ่มตัวแปรท้องที่ใหม่

ถ้าใช้ตัวแปรเพียงในสถานที่เดียว พวกเราก็สามารถประกาศตัวแปรท้องที่ใหม่ได้ ดังนี้:

ตัวอย่าง

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

ทดสอบเอง

การสนับสนุนโบรว์เซอร์

ตัวเลขในตารางนี้บอกเล่าถึงเวอร์ชั่นโบรว์เซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่

ฟังก์ชัน
var() 49.0 15.0 31.0 9.1 36.0

ฟังก์ชัน CSS var()

ฟังก์ชัน คำอธิบาย
var() แบบภาพค่าตัวแปร CSS