ตัวแปร CSS คืออะไรและจะใช้งานอย่างไร
เผยแพร่แล้ว: 2022-02-16เมื่อเขียนโค้ด CSS สำหรับไซต์ของคุณ คุณสามารถใช้ CSS Custom Properties (Variables) เพื่อเร่งกระบวนการพัฒนาได้ คุณสามารถใช้ตัวแปรเพื่อกำหนดคุณสมบัติ (ขนาด สี) ซึ่งสามารถนำไปใช้กับองค์ประกอบต่างๆ ได้
ด้วยวิธีนี้ จะสามารถควบคุมโค้ดและการออกแบบได้มากขึ้น การเปลี่ยนแปลงค่าของตัวแปรในที่เดียวจะแทนที่ค่าของคุณสมบัตินั้นทุกที่ที่เรียกใช้
โพสต์นี้จะอธิบายวิธีใช้ตัวแปร CSS และแอปพลิเคชันที่ใช้งานได้จริง
เริ่มกันเลย!
การประกาศตัวแปร
ตัวแปรสามารถมีขอบเขตทั่วโลกหรือเฉพาะที่ ในการกำหนดตัวแปรทั่วโลก คุณใช้ตัวเลือก :root
:root { --base-font-size: 1.1rem; } :root { --base-font-size: 1.1rem; }ตัวเลือก :root ตรงกับรูทของเอกสาร นั่นคือ <html> ในกรณีพิเศษของเรา
หากต้องการประกาศคุณสมบัติที่กำหนดเอง CSS (ตัวแปร) คุณต้องเริ่มต้นด้วยขีดกลางสองอัน (--) ตัวแปรจะคำนึงถึงขนาดตัวพิมพ์ เช่น
--base-font-size และ --Base-Font-Size เป็นสองตัวแปรที่แตกต่างกัน
ในการกำหนดตัวแปรในเครื่อง คุณต้องใช้ตัวเลือกขององค์ประกอบที่คุณต้องการใช้ตัวแปร
#first-container { --background: #ccc; } #first-container { --background: #ccc; }เมื่อคุณกำหนดตัวแปรแล้ว คุณจำเป็นต้องเรียกใช้มัน
ฟังก์ชัน var()
ฟังก์ชัน var() ใช้เพื่อแทรกค่าของตัวแปร CSS ที่กำหนด ฟังก์ชั่นแทนที่ตัวเองด้วยค่าของตัวแปร ลองมาดูตัวอย่าง:
โค้ด HTML
- คัดลอก และวางโค้ดนี้ลงในโปรแกรมแก้ไขโค้ดของคุณ
- บันทึก ไฟล์เป็น index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> 
โค้ด CSS
- สร้าง ไฟล์ชื่อ style.css (ในไดเร็กทอรีเดียวกันของ index.html )
- วาง รหัสด้านล่างและบันทึกไฟล์
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 
มีบางสิ่งที่ควรสังเกตที่นี่:
- การสร้างจานสีเป็นกระบวนการที่ตรงไปตรงมา
- คุณสามารถใช้ตัวแปรภายในคำจำกัดความของตัวแปรอื่นได้ เช่น สีในคำจำกัดความของตัวแปรเส้นขอบ
- ตัวแปรได้รับการสืบทอด คุณสมบัติสีขององค์ประกอบ .container-* ส่งผลต่อลูกโดยตรง ในกรณีนี้ <p> องค์ประกอบ
หากต้องการลบล้างตัวแปร คุณจะต้องประกาศตัวแปรภายในคอนเทนเนอร์ ซึ่งจะทำให้มีความเฉพาะเจาะจงมากขึ้น
- แก้ไข โค้ด CSS:
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 
ตัวแปรและแบบสอบถามสื่อ
ตัวแปรยังสามารถสืบทอดและแทนที่ในคิวรี่สื่อ CSS
- เพิ่ม รหัสนี้ให้กับตัวแปร:
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; } :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }เราได้กำหนดความกว้างฐานสำหรับองค์ประกอบเสื้อคลุม ตอนนี้เราสามารถนำตัวแปรเหล่านี้ไปใช้กับคุณสมบัติ .wrapper width ได้
- เพิ่ม รหัสนี้ที่ส่วนท้ายของไฟล์ CSS:
.wrapper { width: var(--wrapper-width);
margin: 0 auto; } .wrapper { width: var(--wrapper-width);
margin: 0 auto; } 
ในการกำหนดคิวรีสื่อสำหรับอุปกรณ์ที่มีหน้าจอกว้างน้อยกว่า 1100px เราเขียนข้อความค้นหาสื่อต่อไปนี้
- แก้ไข โค้ด CSS:
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } 
นิยามตัวแปรใหม่ภายในเคียวรีสื่อจะแทนที่ค่าของมัน สังเกตด้วยว่าตัวแปรมีอยู่ใน DOM ซึ่งหมายความว่าสามารถดึงข้อมูลและจัดการได้ด้วย JS ซึ่งเป็นไปไม่ได้กับตัวแปรภายในตัวประมวลผลล่วงหน้าของ CSS
สรุป
ตัวแปรมีประโยชน์ในการจัดระเบียบและจัดการ CSS ขนาดเล็กและขนาดใหญ่ ช่วยลดการทำซ้ำและป้องกันข้อผิดพลาด ตัวแปร CSS เป็นไดนามิก ซึ่งหมายความว่าสามารถเปลี่ยนแปลงได้ในรันไทม์ ง่ายต่อการกำหนดธีมของไซต์หรือแอปพลิเคชันแบบไดนามิกด้วยตัวแปร CSS พวกเขาให้ความสามารถในการกำหนดค่าให้กับคุณสมบัติ CSS ด้วยชื่อที่กำหนดเอง ตัวแปรเป็นไปตามกฎการเรียงซ้อนมาตรฐาน ดังนั้นจึงสามารถกำหนดคุณสมบัติเดียวกันที่ระดับความจำเพาะต่างกันได้
ฉันหวังว่าคุณจะชอบบทช่วยสอนนี้ ขอบคุณที่อ่าน!