ตัวแปรการแทนที่ CSS
แทนที่ Global Variable ด้วย Local Variable
จากหน้าที่แล้ว เราได้เรียนรู้ว่าตัวแปรส่วนกลางสามารถเข้าถึงได้/ใช้งานผ่านเอกสารทั้งหมด ในขณะที่ตัวแปรท้องถิ่นสามารถใช้ได้เฉพาะในตัวเลือกที่มีการประกาศเท่านั้น
ดูตัวอย่างจากหน้าที่แล้ว:
ตัวอย่าง
: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;
}
บางครั้งเราต้องการให้ตัวแปรเปลี่ยนเฉพาะในบางส่วนของหน้าเท่านั้น
สมมติว่าเราต้องการสีน้ำเงินที่แตกต่างกันสำหรับองค์ประกอบปุ่ม จากนั้น เราสามารถประกาศตัวแปร --blue อีกครั้งภายในตัวเลือกปุ่ม เมื่อเราใช้ var(--blue) ในตัวเลือกนี้ มันจะใช้ค่าตัวแปร --blue ที่ประกาศไว้ที่นี่
เราเห็นว่าตัวแปรท้องถิ่น --blue จะแทนที่ตัวแปร --blue ทั่วโลกสำหรับองค์ประกอบของปุ่ม:
ตัวอย่าง
: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; /* local variable will
override global */
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; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับ
var()ฟังก์ชันนี้ อย่างเต็มที่
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() ฟังก์ชัน
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |