คู่มือเริ่มต้นสำหรับตัวแปร CSS (หรือที่รู้จักในชื่อคุณสมบัติกำหนดเองของ CSS)

เผยแพร่แล้ว: 2022-04-10

คุณลักษณะหนึ่งที่อยู่ในรายการความปรารถนา CSS มานานก่อนที่จะกลายเป็นมาตรฐานคือตัวแปร CSS ซึ่งเรียกอย่างเป็นทางการว่า CSS Custom Properties ในข้อกำหนด ตัวแปร CSS เป็นมาตรฐานมาเกือบสิบปีแล้วและเบราว์เซอร์สมัยใหม่ทั้งหมดรองรับมาระยะหนึ่งแล้ว

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

สารบัญ:

ตัวแปร CSS ในตัวประมวลผลล่วงหน้า #
ตัวแปร (คุณสมบัติกำหนดเอง) ใน CSS ดั้งเดิม #
ทำไมต้อง “คุณสมบัติที่กำหนดเอง”? #
ตัวแปร CSS ถูกกำหนดไว้ที่ใด #
หมายเหตุทางเทคนิคเกี่ยวกับตัวแปร CSS #
ทำความเข้าใจกับฟังก์ชัน var() #
การใช้ตัวแปร CSS กับ calc() #
เคล็ดลับกับตัวแปร CSS #

คู่มือสำหรับผู้เริ่มต้นใช้งาน #CSS Variables (พร้อมตัวอย่างการใช้งานจริง) ️

คลิกเพื่อทวีต

ตัวแปร CSS ในตัวประมวลผลล่วงหน้า

ตัวประมวลผลล่วงหน้า CSS ใช้ตัวแปร CSS มานานกว่า 10 ปีแล้ว ฉันจะไม่ลงรายละเอียดมากเกี่ยวกับตัวเลือกเหล่านั้นที่นี่ แต่ฉันคิดว่ามันมีประโยชน์ที่จะรู้ว่าไลบรารีตัวประมวลผลล่วงหน้ายอดนิยมแต่ละไลบรารีใช้ตัวแปรอย่างไร

ใน Sass (หรือ SCSS) คุณประกาศตัวแปรดังนี้:

 $theme-color: #cccccc; .element1 { border: 1 px solid $theme-color; } .element2 { background-color: $theme-color; }
 ภาษารหัส: PHP ( php )

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

ตัวแปรใน Less.js ใช้สัญลักษณ์ @ :

 @linkcolor: firebrick; a,.link { color: @linkcolor; }

และในตัวแปร Stylus มีลักษณะดังนี้:

 font- default = 14 px body font-size font- default
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

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

ตัวแปร (คุณสมบัติที่กำหนดเอง) ใน CSS . ดั้งเดิม

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

 :root { --main : #030303 ; --accent : #5a5a5a ; } .container { color : var (--main); } .footer { border-color : var (--main); } .sidebar { color : var (--accent); } .module { border-color : var (--accent); }
 ภาษารหัส: CSS ( css )

ในตัวอย่างนี้ ฉันได้กำหนดตัวแปร CSS สองตัว: --main และ --accent ฉันได้ใช้ตัวแปร CSS แต่ละตัวกับองค์ประกอบที่แตกต่างกันสององค์ประกอบ ซึ่งแสดงให้เห็นถึงความยืดหยุ่นที่พวกเขาเปิดขึ้น

เช่นเดียวกับตัวแปรในภาษาการเขียนโปรแกรมใดๆ สิ่งนี้ทำให้คุณสามารถประกาศตัวแปรได้ในที่เดียว หากคุณต้องการเปลี่ยนค่านั้นทุกที่ในสไตล์ชีตของคุณในภายหลัง ก็แค่เปลี่ยนการประกาศเดิมและจะมีผลกับทุกตำแหน่งที่คุณใช้ตัวแปร

ทำไมต้อง “คุณสมบัติที่กำหนดเอง”?

ในการสนทนาในชีวิตประจำวัน นักพัฒนามักเรียกคุณลักษณะนี้ว่า "ตัวแปร CSS" ซึ่งสอดคล้องกับวิธีที่ตัวประมวลผลล่วงหน้าและภาษาโปรแกรมอ้างอิงถึงคุณลักษณะเดียวกัน แต่จากมุมมองทางเทคนิคที่เคร่งครัด สิ่งเหล่านี้ไม่ใช่ "ตัวแปร" จริงๆ แต่เป็น คุณสมบัติที่กำหนดเอง

มีไวยากรณ์เดียวกันกับคุณสมบัติที่กำหนดไว้ล่วงหน้าใน CSS ยกเว้นเครื่องหมายขีดกลางสองตัวที่ปรากฏหน้าชื่อคุณสมบัติ ขีดกลางทั้งสองอนุญาตให้ผู้เขียน CSS ใช้ตัวระบุเส้นประที่ถูกต้องโดยไม่ต้องกลัวว่าจะขัดแย้งกับคุณสมบัติ CSS ปกติ

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

คุณสมบัติที่กำหนดเองต่างจากคุณสมบัติ CSS ทั่วไป โดยคำนึงถึงขนาดตัวพิมพ์ ซึ่งหมายความว่า --main-color ไม่เหมือนกับ --Main-Color อักขระที่ถูกต้องที่จะรวมในชื่อคุณสมบัติที่กำหนดเอง ได้แก่ ตัวอักษร ตัวเลข ขีดล่าง และขีดกลาง

ตัวแปร CSS ถูกกำหนดไว้ที่ใด

ดังที่คุณเห็นในตัวอย่างที่ฉันให้ไว้ข้างต้น คุณมักจะเห็นคุณสมบัติที่กำหนดเองของ CSS ที่กำหนดไว้โดยตรงบนองค์ประกอบรากของเอกสาร HTML หรือ DOM เงา :root ตัวเลือกคลาสหลอกทำสิ่งนี้ให้สำเร็จ

 :root { --main : #030303 ; --accent : #5a5a5a ; }
 ภาษารหัส: CSS ( css )

แต่ตัวแปร CSS ไม่ได้จำกัดอยู่เพียงการกำหนดบนองค์ประกอบรูทเท่านั้น และมักจะเป็นประโยชน์ในการกำหนดไว้ที่อื่น โดยทั่วไปแล้วตัวเลือก :root จะถูกเลือก เนื่องจากตัวเลือกนี้จะกำหนดเป้าหมายองค์ประกอบบนสุดในแผนผัง DOM เสมอ (ไม่ว่าจะเป็นเอกสารฉบับเต็มหรือ DOM เงา)

ในกรณีส่วนใหญ่ คุณจะได้ผลลัพธ์เดียวกันโดยการกำหนดคุณสมบัติที่กำหนดเองในองค์ประกอบ html (ซึ่งเป็นองค์ประกอบรากในเอกสาร HTML) หรือแม้แต่องค์ประกอบ body การใช้ :root ช่วยให้โค้ดสามารถพิสูจน์ได้ในอนาคตมากขึ้น (เช่น หากวันหนึ่ง spec เพิ่มองค์ประกอบใหม่เป็นรูท CSS จะยังคงเหมือนเดิม) และฉันคิดว่ายังอนุญาตให้สไตล์ชีตนำไปใช้กับเอกสารประเภทอื่นที่ มีองค์ประกอบรากที่แตกต่างกัน

ตัวอย่างเช่น โค้ดต่อไปนี้จะจำกัดคุณสมบัติที่กำหนดเองของคุณสำหรับใช้ในองค์ประกอบ .sidebar :

 .sidebar { --main : #030303 ; --accent : #5a5a5a ; }
 ภาษารหัส: CSS ( css )

เพื่อจุดประสงค์ในการสาธิต คุณมักจะเห็นตัวแปรที่กำหนดไว้ใน :root แต่คุณสามารถใช้มันได้ทุกที่ที่ใช้งานได้จริง อันที่จริง นักพัฒนาหลายคนแนะนำให้ตั้งค่าให้ต่ำลงในแผนผัง DOM สำหรับโมดูลขนาดเล็กลงในระหว่างการพัฒนาเบื้องต้น จากนั้นจึงพยายามดำเนินการจนถึง :root เมื่อคุณสร้างค่าที่มีขอบเขตมากขึ้น

หมายเหตุทางเทคนิคเกี่ยวกับตัวแปร CSS

นอกเหนือจากความสามารถในการนำไปใช้กับองค์ประกอบใดๆ ได้ ตัวแปร CSS ยังค่อนข้างยืดหยุ่นและจัดการได้ง่าย

นี่คือสิ่งที่ควรค่าแก่การสังเกต:

พวกมันได้รับการแก้ไขด้วยการสืบทอด CSS และกฎการเรียงซ้อนแบบปกติ
คุณสามารถใช้ได้ในคิวรี่สื่อและกฎเงื่อนไขอื่นๆ
คุณสามารถกำหนดได้ในแอตทริบิวต์ style ขององค์ประกอบ
สามารถอ่านหรือตั้งค่าโดยใช้คุณสมบัติของ CSS Object Model

เป็นที่น่าสังเกตว่าคุณสามารถซ้อนตัวแปร CSS ได้ สังเกตตัวอย่างต่อไปนี้:

 :root { --main-color : lightblue; --new-color : var (--main-color); } body { background : var (--new-color); }
 ภาษารหัส: CSS ( css )

สังเกตว่าฉันได้กำหนดตัวแปร --main-color แล้ว ฉันกำลังใช้ชื่อตัวแปรเดียวกันนั้นเป็นค่าสำหรับตัวแปร CSS ต่อไปนี้

คุณยังสามารถใช้คีย์เวิร์ด !important ในค่าตัวแปร CSS ได้ แต่จะใช้เฉพาะ “ความสำคัญ” กับตัวตัวแปรเองโดยสัมพันธ์กับคำจำกัดความของตัวแปรอื่นๆ เท่านั้น ห้ามใช้กับค่าที่ใช้ในองค์ประกอบอย่างน้อยหนึ่งรายการในเอกสาร หากสิ่งนี้ทำให้สับสน นี่คือตัวอย่าง:

 :root { --main-color : lightblue !important ; --main-color : orange; } body { background : var (--main-color); }
 ภาษารหัส: CSS ( css )

ในตัวอย่างข้างต้น สีพื้นหลังจะเป็น "สีฟ้าอ่อน" แม้ว่าสีส้มจะปรากฏในภายหลังในคำจำกัดความของตัวแปร แต่คุณค่าเบื้องหลังขององค์ประกอบ body จะไม่มีความสำคัญใดๆ

ตัวแปร CSS ยังสามารถมีค่าคีย์เวิร์ดที่ใช้กับ CSS เช่น initial , inherit และ unset แต่คุณสมบัติ all จะไม่ส่งผลต่อ CSS Variables (เช่น ค่าเหล่านี้จะไม่ถูกรีเซ็ต)

ทำความเข้าใจกับฟังก์ชัน `var()`

คุณเคยเห็นฟังก์ชัน var() ที่ใช้ในตัวอย่างทั่วไปในบทช่วยสอน CSS Variables นี้แล้ว แต่มี var() มากกว่าที่ฉันได้กล่าวถึง

ขั้นแรก ฟังก์ชัน var() ใช้ได้เฉพาะในค่าเท่านั้น ชื่อคุณสมบัติหรือตัวเลือกไม่สามารถใช้ตัวแปร CSS นอกจากนี้ ค่าการสืบค้นสื่อไม่สามารถใช้ตัวแปร CSS ได้ (เช่น @media (max-width: var(--my-var)) ไม่ถูกต้อง)

ฟังก์ชัน var() รับสองอาร์กิวเมนต์:

ชื่อของคุณสมบัติที่กำหนดเองที่จะรวม
ค่าทางเลือกในกรณีที่คุณสมบัติที่กำหนดเองไม่ถูกต้อง

นี่คือตัวอย่างที่อาร์กิวเมนต์ที่สองมีผล:

 :root { --main-colour : lightgreen; } body { background : var (--main-color, #ccc); }
 ภาษารหัส: CSS ( css )

โปรดสังเกตในโค้ดด้านบนนี้ ฉันได้สะกดชื่อตัวแปรเริ่มต้นโดยใช้คำว่า "สี" ในอังกฤษหรือแคนาดา แต่เมื่อฉันใช้ตัวแปร ฉันรวมการสะกดคำว่า "สี" แบบอเมริกันเข้าไปด้วย สิ่งนี้ทำให้ตัวแปรไม่ถูกต้องในทางเทคนิค ดังนั้นพื้นหลังสีเทาธรรมดา ( #ccc ) จึงมีผลแทน

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

 :root { --main-font : Helvetica, Arial, sans-serif; } body { font-family : var (--main-type, "Courier New" , Consolas, monospace); }
 ภาษารหัส: CSS ( css )

โปรดสังเกตอีกครั้งว่าตัวแปรของฉันมีข้อบกพร่อง โดยประกาศ --main-type ที่ไม่รู้จักแทน --main-font ซึ่งจะทริกเกอร์ค่าทางเลือก ซึ่งเป็นสแต็กแบบอักษรสำรอง ดังนั้น ทุกอย่างที่อยู่หลังเครื่องหมายจุลภาคแรก (รวมถึงเครื่องหมายจุลภาคอื่นๆ) จึงเป็นค่าทางเลือก

การใช้ตัวแปร CSS สำหรับบางส่วน

เมื่อกำหนดตัวแปร CSS ค่าที่เก็บไว้ไม่จำเป็นต้องเป็นค่า CSS ที่ถูกต้องในตัวเอง อาจเป็นค่าบางส่วนที่สามารถใช้เป็นส่วนหนึ่งของค่าทั้งหมดได้

ตัวอย่างเช่น คุณสามารถแยกกลุ่มแบบอักษร:

 :root { --main-font : "Franklin Gothic" ; --fallback-font : Gill Sans; --generic-font : sans-serif; } body { font-family : var (--main-font), var (--fallback-font), var (--generic-font); }
 ภาษารหัส: CSS ( css )

ในกรณีนี้ ค่าตัวแปรแต่ละตัวทำงานด้วยตัวเอง แต่จะแสดงจุดนั้น มาลองใช้ตัวอย่างที่ประดิษฐ์ขึ้นโดยใช้สัญกรณ์สี rgba() กัน:

 :root { --rgba-red : 25 ; --rgba-green : 50 ; --rgba-blue : 105 ; --rgba-opacity : 0.4 ; } body { background : rgba (var(--rgba-red), var (--rgba-green), var (--rgba-blue), var (--rgba-opacity)); }
 ภาษารหัส: CSS ( css )

คุณสามารถดูได้ว่าสิ่งนี้มีประโยชน์เพียงใด ช่วยให้คุณ "สร้าง" ค่าแบบไดนามิกได้

การใช้ตัวแปร CSS กับ `calc()`

วิธีที่มีประโยชน์วิธีหนึ่งในการรวมตัวแปร CSS เข้ากับโครงการของคุณคือการใช้ร่วมกับฟังก์ชัน calc() ดังที่คุณทราบ calc() ช่วยให้คุณสามารถคำนวณภายในค่าได้ ดังนั้นคุณสามารถทำสิ่งนี้:

 .element { width : calc ( 100% - 100px ); }
 ภาษารหัส: CSS ( css )

คุณสมบัติที่กำหนดเองของ CSS ช่วยให้คุณนำ calc() ไปสู่ระดับถัดไปได้ เช่น ด้วยขนาดที่กำหนดไว้ล่วงหน้า Ahmad Shadeed อธิบายบางสิ่งที่คล้ายกันและนี่คือตัวอย่าง:

 :root { --size : 240 ; } .module { width : calc (var(--size) * 1px ); } .module-small { --size : 360 ; } .module-medium { --size : 720 ; } .module-large { --size : 1080 ; }
 ภาษารหัส: CSS ( css )

ด้วยสิ่งนี้ ฉันสามารถใช้กฎ .module และ . .module .module-* ที่ตั้งอยู่ภายในคิวรี่สื่อ ทำให้ฉันแสดงสไตล์เหล่านั้นตามเงื่อนไขสำหรับขนาดวิวพอร์ตเฉพาะหรือคุณสมบัติสื่ออื่นๆ โมดูลขนาดเล็ก/กลาง/ใหญ่จะมีคลาสเดียวกันกับโมดูลหลัก แต่จะเขียนทับเฉพาะขนาดโมดูลตามความจำเป็น ในตัวอย่างข้างต้น ค่าเริ่มต้น 240 สำหรับขนาดทำหน้าที่เป็นค่าเริ่มต้น แต่ฉันสามารถส่ง 240px เป็นอาร์กิวเมนต์ที่สองใน var() เพื่อทำงานเป็นทางเลือก

เคล็ดลับกับตัวแปร CSS

นักพัฒนาหลายคนได้แบ่งปันคำแนะนำและเคล็ดลับการใช้ตัวแปร CSS ในช่วงหลายปีที่ผ่านมา ฉันจะไม่ขยายรายละเอียดเหล่านี้ในที่นี้เนื่องจากนี่เป็นบทช่วยสอนสำหรับผู้เริ่มต้นเป็นหลัก แต่นี่เป็นบทสรุปโดยย่อบางส่วน:

ดังที่ได้กล่าวไว้ก่อนหน้านี้ คุณสามารถใช้ตัวแปร CSS ในรูปแบบอินไลน์ได้ เช่นเดียวกับในกรณีของกล่องอัตราส่วนกว้างยาว
อักขระช่องว่างเป็นค่าที่ถูกต้องสำหรับตัวแปร CSS ซึ่งช่วยให้คุณทำเคล็ดลับเปิด/ปิด (เช่น สำหรับบางอย่างเช่นโหมดมืด) ซึ่งคุณสามารถอ่านได้ในโพสต์ของ Lea
คุณไม่สามารถเขียนรูปแบบโฮเวอร์ในรูปแบบอินไลน์ได้ แต่คุณสามารถแก้ไขสิ่งนี้ได้โดยใช้ตัวแปร CSS
ตัวแปร CSS ช่วยให้สร้าง SVG หลากสีได้ง่ายขึ้น ดังที่อธิบายไว้ที่นี่
คุณสามารถสร้างระบบและธีมการออกแบบที่ใช้งานได้จริงและบำรุงรักษาได้ด้วย CSS Variables ซึ่งอธิบายรายละเอียดในโพสต์นี้
คุณสามารถใช้ CSS Variables เพื่อสร้างกริดที่มีประสิทธิภาพและบำรุงรักษาได้มากขึ้นโดยใช้ฟีเจอร์ Grid Layout ตามที่ Michelle Barker อธิบาย

ไปที่ด้านบน

บทสรุป

ตัวแปร CSS หรือคุณสมบัติที่กำหนดเองของ CSS พร้อมใช้งานแล้วในปัจจุบัน โดยมีเบราว์เซอร์ที่ใช้งานทั่วโลกกว่า 90% ที่สนับสนุนคุณลักษณะที่มีประโยชน์นี้ ฉันหวังว่าการอภิปรายเกี่ยวกับพื้นฐานและไวยากรณ์นี้จะสนับสนุนให้คุณพิจารณา CSS Variables ในโครงการใหม่ล่าสุดของคุณ หากคุณยังไม่ได้ดำเนินการดังกล่าว

หากการใช้ CSS Variables ของคุณถูกจำกัดไว้สำหรับสีของธีมทั่วโลก บางทีบทช่วยสอนนี้อาจเป็นแรงบันดาลใจให้คุณใช้ประโยชน์จากสีเหล่านี้ให้มากขึ้น และอาจมีลูกเล่นของคุณเอง

เมื่อคุณใช้ตัวแปร CSS เสร็จแล้ว โปรดดูคำแนะนำอื่นๆ ของเรา:

เค้าโครงกริด CSS
ข้อมูลเบื้องต้นเกี่ยวกับ Parcel.js
กวดวิชา CSS flexbox
Webpack สำหรับผู้เริ่มต้น
บทช่วยสอน Micro-Interactions สำหรับนักพัฒนามือใหม่

ในกรณีที่คุณมีคำถามใดๆ เกี่ยวกับบทช่วยสอน CSS Variables โปรดส่งคำถามเหล่านี้ในความคิดเห็นด้านล่าง

ทุกสิ่งที่คุณต้องรู้เกี่ยวกับตัวแปร #CSS (พร้อมตัวอย่างที่ใช้งานได้จริง) ️