เมื่อพูดถึง CSS มันง่ายที่จะหลงทางเมื่อแอปพลิเคชันมีสีเดียวกันหรือรัศมีเส้นขอบเดียวกันในหลาย ๆ ที่ และคุณ (หรือไคลเอนต์ของคุณ) ตัดสินใจว่าจำเป็นต้องทำการเปลี่ยนแปลง สมมติว่าคุณมีสีเดียวกันในที่ต่างๆ หลายร้อยแห่ง และตัดสินใจว่าจะต้องเข้มกว่านี้ คุณทำอะไร? ค้นหาและแทนที่? ติดตามพวกเขาด้วยมือ?

โชคดีที่ CSS มีวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับสิ่งนี้: ตัวแปร CSS (บางครั้งเรียกว่าคุณสมบัติที่กำหนดเอง) ตัวแปร CSS นั้นยอดเยี่ยมสำหรับการอัปเดตคุณสมบัติเฉพาะอย่างรวดเร็ว ทำให้ไฟล์ CSS ของคุณแห้ง และทำให้โค้ดของคุณใช้งานง่ายขึ้นสำหรับนักพัฒนารายอื่น (prima facie --primary-colorมีความหมายมากกว่า#3f1314)

ฉันได้สร้างหน้าต้อนรับอย่างง่ายนี้เพื่อสาธิตวิธีการใช้ตัวแปร CSS ในโค้ดของคุณ เล่นไฟล์ style.css ได้ตามสบายในขณะที่คุณอ่านต่อไป เนื่องจากจะช่วยให้คุณมีแนวคิดที่ดีขึ้นว่าคุณสมบัติที่กำหนดเองทำงานอย่างไรในแอปพลิเคชัน

ตัวแปร CSS คืออะไร?

ตัวแปร CSS เป็นคุณสมบัติที่กำหนดเองซึ่งกำหนดไว้ในสไตล์ชีตที่สามารถต่อเรียงเป็นองค์ประกอบย่อยได้ เมื่อใดก็ตามที่มีการประกาศคุณสมบัติที่กำหนดเอง คุณกำลังสร้าง คุณสมบัติ ใหม่ที่สามารถใช้ได้ภายในแอปพลิเคชันของคุณ เนื่องจากนี่ไม่ใช่คุณสมบัติมาตรฐานเช่น "ช่องว่างภายใน" เราจึงต้องให้เบราว์เซอร์รู้ว่าคุณสมบัติใหม่คืออะไร เราสามารถทำได้โดยการประกาศคุณสมบัติใหม่ของเราภายในตัวเลือก:

ทำลายมันลง

สิ่งแรกที่คุณอาจสังเกตเห็นในตัวอย่างข้างต้นคือ:rootตัวเลือก “ ” รูทคือตัวเลือกคลาสหลอกที่อ้างถึงองค์ประกอบรูทของเอกสาร ( <html>องค์ประกอบในกรณีส่วนใหญ่) อย่างไรก็ตาม แม้ว่าจะใช้เพื่อเลือก<html>องค์ประกอบ แต่รูทก็มีความจำเพาะในระดับที่สูงกว่า แนวทางปฏิบัติที่ดีที่สุดคือการประกาศคุณสมบัติแบบกำหนดเองของคุณภายใน:rootคลาสหลอก เนื่องจากจะทำให้สามารถเข้าถึงตัวแปรได้ทุกที่ในเอกสาร

ตอนนี้เรารู้แล้วว่าตัวเลือกรูทคืออะไร มาพูดถึงไวยากรณ์ที่ใช้กัน ในการประกาศตัวแปรที่กำหนดเองใหม่ของคุณ คุณจะต้องใช้สิ่งที่เรียกว่า "สัญกรณ์คุณสมบัติที่กำหนดเอง" สัญกรณ์นี้ประกอบด้วยสองขีดกลาง ชื่อของตัวแปร และค่าของตัวแปร (เช่น--name: value;)

เมื่อเราประกาศตัวแปรของเราในองค์ประกอบรูทแล้ว เราสามารถเข้าถึงได้จากทุกที่ในเอกสารของเรา มาดูที่ตัวเลือกปุ่มเพื่อดูว่าเราสามารถเข้าถึงคุณสมบัติเหล่านี้ได้อย่างไร

ดังที่แสดงไว้ข้างต้น เรากำลังเข้าถึง คุณสมบัติ --primary-clrของเราและของเรา--secondary-clrผ่านvar()ฟังก์ชันภายในlinear-gradient()ฟังก์ชัน เนื่องจากคุณสมบัติที่กำหนดเองของเราได้รับการประกาศในองค์ประกอบรูทของเรา เราจึงสามารถเข้าถึงได้ในตัวเลือกของเรา

โดยการประกาศและเรียกคุณสมบัติที่กำหนดเองของเราด้วยวิธีนี้ เราสามารถทำการอัปเดตทั่วโลกสำหรับตัวแปรเหล่านี้ได้จากองค์ประกอบรูทของเรา:

การเปลี่ยนเป็น--secondary-clrสีน้ำเงิน ไม่เพียงแต่เราจะเปลี่ยนสีของปุ่มเท่านั้น แต่เรายังเปลี่ยนสีขอบด้วยเนื่องจากใช้--secondary-clrคุณสมบัตินี้ด้วย

โบนัส: การใช้calc()ฟังก์ชันกับตัวแปร CSS

หากเราไม่ต้องการให้เส้นขอบหลักและปุ่มของเราเหมือนกันborder-radiusแต่เราต้องการให้เป็นสัดส่วน เราก็สามารถใช้calc()ฟังก์ชันได้ ให้ดูที่ตัวเลือกปุ่มอีกครั้ง โดยเฉพาะborder-radiusคุณสมบัติ:

border-radius: calc(var(--br) / 2 );

TL;DR

1. ตัวแปร CSS ช่วยทำให้ไฟล์ CSS ของคุณแห้ง และทำให้ง่ายต่อการอัปเดตสไตล์ทั่วทั้งแอปพลิเคชัน
2. ตัวแปร CSS มักจะถูกประกาศภายใน:rootตัวเลือกคลาสหลอกสำหรับการเข้าถึงทั่วโลก
3. เพื่อให้เบราว์เซอร์ทราบเกี่ยวกับคุณสมบัติที่กำหนดเองของเรา เราจำเป็นต้องกำหนดคุณสมบัติโดยใช้สัญลักษณ์คุณสมบัติที่กำหนดเอง
4. เราสามารถเข้าถึงคุณสมบัติเหล่านี้ได้โดยใช้var()ฟังก์ชัน