ตัวแปร CSS - ฟังก์ชัน var()

สารบัญ

    แสดงสารบัญ

ตัวแปร CSS

ฟังก์ชัน var() ใช้ในการแทรกค่าของ a ตัวแปรซีเอสเอส

ตัวแปร 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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>The Traditional Way</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

ไวยากรณ์ของฟังก์ชัน var()

ฟังก์ชัน var() ใช้ในการแทรกค่าของ a ตัวแปรซีเอสเอส

ไวยากรณ์ของฟังก์ชัน var() เป็นดังนี้:

 var(--name, value)
name

ที่จำเป็น. ชื่อตัวแปร (ต้องขึ้นต้นด้วย 2 ขีดกลาง)

value

ไม่จำเป็น. ค่าทางเลือก (ใช้หากไม่พบตัวแปร)

หมายเหตุ: ชื่อตัวแปรต้องขึ้นต้นด้วยขีดกลางสองอัน (--) และคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่!

var() ทำงานอย่างไร

ประการแรก: ตัวแปร CSS สามารถมีขอบเขตส่วนกลางหรือท้องถิ่นได้

ตัวแปรโกลบอลสามารถเข้าถึงได้/ใช้งานผ่านเอกสารทั้งหมดในขณะที่ ตัวแปรท้องถิ่นสามารถใช้ได้เฉพาะภายในตัวเลือกที่มีการประกาศเท่านั้น

หากต้องการสร้างตัวแปรที่มีขอบเขตทั่วโลก ให้ประกาศตัวแปรไว้ภายใน :root ตัวเลือก ตัวเลือก :root ตรงกับองค์ประกอบรากของเอกสาร

หากต้องการสร้างตัวแปรที่มีขอบเขตภายในเครื่อง ให้ประกาศตัวแปรไว้ในตัวเลือกที่จะใช้

ตัวอย่างต่อไปนี้เท่ากับตัวอย่างด้านบน แต่ที่นี่เราใช้ฟังก์ชัน var()

ขั้นแรก เราประกาศตัวแปรส่วนกลางสองตัว (--สีน้ำเงิน และ --สีขาว) จากนั้นเราก็ใช้ 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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

ข้อดีของการใช้ 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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่สนับสนุนโดยสมบูรณ์ ฟังก์ชัน var()

Function
var() 49.0 15.0 31.0 9.1 36.0

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

var()

แทรกค่าของตัวแปร CSS