CSS ตัวแปร

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

มาตราฐานภาษา CSS ฟังก์ชัน var()

var(name, value)
ค่า การอธิบาย
name สำคัญ. ชื่อตัวแปร (เริ่มด้วยสองขีดใต้)
value ทำเลือกได้. ค่ากลับค่า (ใช้เมื่อไม่พบตัวแปร)

หมายเหตุ:ชื่อตัวแปรจะต้องเริ่มด้วยสองขีดใต้ (--) และแยกของขนาดตัวอักษร!

ฝากลาง 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() 49.0 15.0 31.0 9.1 36.0

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

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