ตัวแปร CSS ใน Pure CSS – เริ่มต้นใน 5 นาทีหรือน้อยกว่า

ตัวแปร CSS (หรือเป็นทางการ: คุณสมบัติที่กำหนดเอง ) ใน CSS ล้วนช่วยประหยัดเวลาได้มากสำหรับทุกคนที่เต็มใจที่จะลงทุนห้านาทีในการเรียนรู้วิธีใช้งาน มีมาตั้งแต่ CSS3 และ 92% ของผู้ใช้ทั้งหมดมีเบราว์เซอร์ที่สนับสนุนพวกเขา การใช้ตัวแปร CSS ไม่ต้องการการเปลี่ยนแปลงที่สำคัญในสไตล์ชีตที่มีอยู่หรือเครื่องมือใหม่ และสามารถนำไปใช้กับโปรเจ็กต์เก่าได้อย่างง่ายดาย แทนที่จะเขียนรหัสสีฐานสิบหกในหลายร้อยตำแหน่งในไฟล์ คุณสามารถกำหนดรหัสสีนั้นได้ในที่เดียว - ด้วยตัวแปร CSS ประหยัดเวลาได้มากและช่วยทำให้สไตล์ชีตมีความสอดคล้องกันมากขึ้น

เดี๋ยวก่อน นี่คือ Saas หรือ Less ใช่ไหม

ไม่ เรากำลังพูดถึง CSS บริสุทธิ์ที่นี่ ไม่ใช่ CSS ควบคู่กับตัวประมวลผลล่วงหน้า เช่น Saas, Less หรือ SCSS การใช้ตัวแปร CSS ไม่ต้องการเครื่องมือ ตัวแก้ไข หรือการเปลี่ยนแปลงใดๆ ในเวิร์กโฟลว์หรือสิ่งอื่นที่คุณใช้เพิ่มเติม ดังนั้น ไฟล์ CSS ที่มีอยู่ซึ่งไม่มีตัวแปรจึงไม่ต้องการการเปลี่ยนแปลง "พิเศษ" และคุณสามารถผสมและจับคู่ได้ - ใช้ตัวแปรเฉพาะสำหรับบางส่วนของไฟล์ หรือเฉพาะในไฟล์บางไฟล์เท่านั้นที่เป็นโปรเจ็กต์ของคุณ

ตัวประมวลผลล่วงหน้า CSS เช่น Saas หรือ Less รองรับตัวแปรเช่นกัน นอกจากนี้ยังมีฟังก์ชันและตัวเลือกอีกมากมายที่คุณสามารถใช้ได้ อย่างไรก็ตาม ตามชื่อที่แนะนำ พวกเขาต้องการตัวประมวลผลล่วงหน้า ซึ่งเป็นเครื่องมือที่แปลง CSS ที่เขียนด้วย Saas เป็น CSS ล้วน หากคุณต้องการเพียงตัวแปร CSS ล้วนมีทุกสิ่งที่คุณต้องการ

ตัวแปร CSS เป็นฟังก์ชันดั้งเดิม และนั่นคือสิ่งที่ทำให้พวกเขายอดเยี่ยม สไตล์ชีตของคุณสามารถอ่านและสอดคล้องกันมากขึ้นโดยใช้ความพยายามเพียงเล็กน้อย นอกจากนี้ การเปลี่ยนแปลงใดๆ ที่คุณต้องทำในภายหลังนั้นทำได้ง่ายกว่ามาก – เร็วกว่าการทำการค้นหา&แทนที่ เมื่อคุณต้องเปลี่ยนรหัสสีในที่ต่างๆ หลายร้อยแห่ง

มาสร้างตัวแปรกัน

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

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

หากคุณต้องการใช้ตัวแปรทั่วโลก (ทุกที่) ในไฟล์ CSS คุณต้องกำหนดตัวแปรใน :root pseudo-class ตำแหน่งในไฟล์ไม่สำคัญ อาจเป็นที่จุดเริ่มต้นหรือจุดสิ้นสุดของไฟล์ แต่คุณต้องใส่ตัวแปรใน :root ชื่อต้องขึ้นต้นด้วยขีดสอง -- และไม่มีช่องว่างใดๆ ตัวแปร CSS สามารถเก็บค่าใดๆ ที่คุณมักจะกำหนดให้กับคุณสมบัติ CSS; ตั้งแต่ค่าธรรมดาๆ เช่น สี ไปจนถึงนิพจน์ที่ซับซ้อนสำหรับคุณสมบัติชวเลข เช่น พื้นหลังหรือเงา

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

การใช้ค่าทางเลือก

ในกรณีที่ไม่ได้กำหนดตัวแปร สามารถระบุค่าทางเลือกให้กับฟังก์ชัน var() เป็นพารามิเตอร์ที่สองได้

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

ไม่ต้องกังวลหากค่าคุณสมบัติเป็นค่าที่ซับซ้อน พารามิเตอร์ fallback อนุญาตให้ใช้เครื่องหมายจุลภาค (ดูตัวอย่าง box-shadow ) นอกจากนี้ยังอนุญาตให้เชื่อมโยงฟังก์ชัน var() หลายรายการตามที่แสดงสำหรับสีใน . .custom-text หาก --my-red และ --my-blue ไม่ได้กำหนดไว้ สีแดงจะถูกใช้เป็นสี

การรวม var() และ calc() เข้าด้วยกันก็ใช้ได้ผลเช่นกัน โดยไม่มีความประหลาดใจใดๆ ในไวยากรณ์ ต่อไปนี้คือตัวอย่างที่มีตัวแปรในเครื่องซึ่งมีอยู่ในคลาสที่กำหนดไว้เท่านั้น

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

ใช้ calc() เท่าที่จำเป็น ไม่ใช่เรื่องเลวร้าย แต่เมื่อใช้งานมากเกินไปจะเกิดปัญหาในการดีบั๊กและบำรุงรักษา

รับและตั้งค่าตัวแปร CSS ผ่าน JavaScript

ด้วยการใช้ JavaScript ธรรมดา คุณสามารถตั้งค่าตัวแปร CSS ใหม่และเข้าถึงค่าของตัวแปรได้ ฉันไม่ได้ใช้วิธีนี้ ฉันชอบเปลี่ยนคลาสขององค์ประกอบแทน อย่างไรก็ตาม ไม่มีอะไรผิดปกติหากคุณต้องการเข้าถึงตัวแปร CSS ผ่าน JavaScript สามารถใช้ได้ในบางสถานการณ์อย่างแน่นอน ผู้ที่ติด jQuery สามารถแปลงรหัสเป็นปลั๊กอิน jQuery

ในการสร้างตัวแปรใหม่หรือเปลี่ยนค่าของค่าที่มีอยู่ให้ใช้:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

การเข้าถึงตัวแปรนั้นซับซ้อนกว่าเล็กน้อย หากตัวแปรถูกกำหนดผ่าน JS ให้ใช้:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

อย่างไรก็ตาม หากกำหนดผ่าน CSS (และโดยปกติแล้วจะเป็น) ให้ใช้รหัสนี้:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

ปัญหาและสิ่งที่ต้องระวัง

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

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

คุณไม่ประสบความสำเร็จอะไรเลย เพิ่งได้ --spacing-10 แทนที่จะเป็น 10px ในไม่ช้า คุณจะจบลงด้วยการสร้างตัวแปรอีกยี่สิบตัวสำหรับทุกๆ ค่าพิกเซลของช่องว่างภายในที่มีตั้งแต่ 5px ถึง 100px หากคุณต้องการความสม่ำเสมอ ลองใช้แนวคิด --small-padding, --medium-padding, --large-padding และกำหนดค่าตัวเลขที่เหมาะสม

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

ไม่มีเหตุผลที่จะไม่ใช้ตัวแปร CSS

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