ตัวแปร CSS - ฟังก์ชัน var()
ตัวแปร CSS
ฟังก์ชันvar()นี้ใช้เพื่อแทรกค่าของตัวแปร CSS
ตัวแปร CSS มีสิทธิ์เข้าถึง DOM ซึ่งหมายความว่าคุณสามารถสร้างตัวแปรด้วยขอบเขตภายในหรือส่วนกลาง เปลี่ยนตัวแปรด้วย JavaScript และเปลี่ยนตัวแปรตามคิวรีสื่อ
วิธีที่ดีในการใช้ตัวแปร CSS คือเมื่อพูดถึงสีสันของการออกแบบของคุณ แทนที่จะคัดลอกและวางสีเดียวกันซ้ำแล้วซ้ำเล่า คุณสามารถใส่สีเหล่านั้นลงในตัวแปรได้
วิถีดั้งเดิม
ตัวอย่างต่อไปนี้แสดงวิธีดั้งเดิมในการกำหนดสีบางสีในสไตล์ชีต (โดยการกำหนดสีที่จะใช้สำหรับองค์ประกอบเฉพาะแต่ละรายการ):
ตัวอย่าง
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
ไวยากรณ์ของฟังก์ชัน var()
ฟังก์ชันvar()นี้ใช้เพื่อแทรกค่าของตัวแปร CSS
ไวยากรณ์ของvar()ฟังก์ชันมีดังนี้:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
หมายเหตุ:ชื่อตัวแปรต้องขึ้นต้นด้วยขีดกลางสองอัน (--) และคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่!
var() ทำงานอย่างไร
ประการแรก: ตัวแปร CSS สามารถมีขอบเขตส่วนกลางหรือในเครื่องได้
ตัวแปรส่วนกลางสามารถเข้าถึงได้/ใช้ผ่านเอกสารทั้งหมด ในขณะที่ตัวแปรภายในสามารถใช้ได้เฉพาะภายในตัวเลือกที่มีการประกาศเท่านั้น
ในการสร้างตัวแปรที่มีขอบเขตทั่วโลก ให้ประกาศภายใน:root
ตัวเลือก ตัว:rootเลือกตรงกับองค์ประกอบรากของเอกสาร
ในการสร้างตัวแปรที่มีขอบเขตในเครื่อง ให้ประกาศภายในตัวเลือกที่จะใช้
ตัวอย่างต่อไปนี้เท่ากับตัวอย่างข้างต้น แต่ที่นี่เราใช้var()ฟังก์ชัน
อันดับแรก เราประกาศตัวแปรส่วนกลางสองตัว (--blue และ --white) จากนั้น เราใช้
var()ฟังก์ชันเพื่อแทรกค่าของตัวแปรในภายหลังในสไตล์ชีต:
ตัวอย่าง
: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;
}
ข้อดีของการใช้ var() คือ:
- ทำให้โค้ดอ่านง่ายขึ้น (เข้าใจมากขึ้น)
- ทำให้เปลี่ยนค่าสีได้ง่ายขึ้น
หากต้องการเปลี่ยนสีน้ำเงินและสีขาวเป็นสีน้ำเงินและสีขาวที่นุ่มนวลขึ้น คุณเพียงแค่เปลี่ยนค่าตัวแปรสองค่า:
ตัวอย่าง
:root {
--blue: #6495ed;
--white: #faf0e6;
}
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;
}
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับ
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 |