ทำความเข้าใจกับตัวแปร CSS (และวิธีการใช้งาน)
เผยแพร่แล้ว: 2025-07-13ตัวแปร CSS เป็นเหมือนส่วนผสมการออกแบบที่นำมาใช้ซ้ำได้ คุณกำหนดมันครั้งเดียวเป็นสีของแบรนด์ขนาดตัวอักษรหรือระยะห่างจากนั้นใช้พวกเขาทุกที่ที่ต้องการ พวกเขาช่วยคุณไม่ให้พิมพ์รหัส hex และค่าพิกเซลเดียวกันในส่วนต่าง ๆ
ประโยชน์ที่ใหญ่ที่สุดของพวกเขาคือการอัปเดตง่ายเพียงใด หากคุณอัปเดตตัวแปรหนึ่งครั้งสถานที่ที่ใช้จะสะท้อนการเปลี่ยนแปลงเช่นกัน ดังนั้นคุณไม่เพียง แต่หลีกเลี่ยงการทำซ้ำค่าเดียวกันด้วยตนเองในหลายส่วน แต่คุณยังสามารถปรับแต่งรูปลักษณ์ของเว็บไซต์ทั้งหมดได้โดยการเปลี่ยนค่าเดียว
นี่คือที่ที่มันจะดียิ่งขึ้น: ด้วย Divi 5 คุณไม่จำเป็นต้องเขียนโค้ดใด ๆ เพื่อใช้ตัวแปร CSS ตัวแปรการออกแบบของ Divi ช่วยให้คุณใช้มันในเวิร์กโฟลว์ที่ไม่มีรหัส อยากรู้ว่ามันทำงานอย่างไร? อ่านต่อไป
- 1 ตัวแปร CSS คืออะไร?
- 1.1 ตัวแปร CSS ทำงานอย่างไร
- 1.2 การทำความเข้าใจตัวแปร CSS น้ำตก
- 1.3 การเพิ่มค่าทางเลือก
- 2 วิธีที่ไม่มีรหัสในการใช้ตัวแปร CSS ใน Divi 5
- 2.1 กำหนดตัวแปร CSS ใน Divi 5
- 3 วิธี Divi 5 ทำให้เวิร์กโฟลว์ตัวแปร CSS ได้อย่างง่ายดาย
- 3.1 1. สร้างกรอบการออกแบบของคุณ
- 3.2 2. ใช้ตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้าสำหรับการจัดแต่งทรงผมที่ยืดหยุ่น
- 3.3 3. ประกาศตัวแปร CSS ที่กำหนดเองสำหรับการควบคุมเพิ่มเติม
- 4 Divi เสนอวิธีการในตัวสำหรับตัวแปร CSS
ตัวแปร CSS คืออะไร?
คิดว่าตัวแปร CSS เป็นฉลากที่กำหนดเองที่คุณสร้างขึ้นสำหรับนิสัยการออกแบบของคุณเอง รัศมีเส้นขอบภาพของคุณคืออะไร? คุณมักจะเว้นระยะห่างระหว่างส่วนต่างๆ? คุณมีสีปุ่มลายเซ็นที่คุณใช้ทุกที่หรือไม่? คุณสามารถเปลี่ยนรูปแบบที่เป็นเอกลักษณ์ทั้งหมดให้เป็นตัวแปร CSS
สิ่งเหล่านี้ไม่ใช่ค่าที่เบราว์เซอร์รู้โดยค่าเริ่มต้น ทุกอย่างเป็นเรื่องกำหนดเอง คุณตัดสินใจชื่อกำหนดค่าที่คุณต้องการและใช้งานทุกที่ที่คุณต้องการ มันเหมือนกับการสร้างชวเลขของคุณเองที่ทำให้การจัดแต่งทรงผมเร็วขึ้นสะอาดและง่ายขึ้นในการอัปเดตในภายหลัง
ลองมาเป็นตัวอย่าง สมมติว่าคุณต้องการให้สีหลักของเว็บไซต์ของคุณเป็น #007bff คุณจะประกาศเช่นนี้:
:root {
--primary-color: #007bff;
}
ที่นี่“-primary-color” เป็นชื่อตัวแปรของคุณและ“#007bff” เป็นค่าของมัน คุณเพิ่งเก็บสีไว้ในฉลากที่กำหนดเองเบราว์เซอร์สามารถรับรู้ได้
ในการใช้งานคุณจะไม่เขียนรหัส hex คุณเรียกตัวแปรภายในฟังก์ชัน var () เช่นนี้:
button {
background-color: var(--primary-color);
}รหัสหนึ่งบรรทัดนั้นช่วยให้มั่นใจได้ว่าปุ่มของคุณจะดึงค่าจาก-สีที่มีสีสันเสมอ
ตอนนี้คุณสามารถใช้งานได้ทุกที่ที่ต้องการและเมื่อถึงเวลาอัปเดตสีแบรนด์ของคุณไม่จำเป็นต้องขุดผ่านไฟล์หลายสิบไฟล์ เพียงแค่เปลี่ยนตัวแปรหนึ่งครั้งและทุกองค์ประกอบที่ใช้ในจะได้รับการปรับปรุงโดยอัตโนมัติ ตัวอย่างเช่นปุ่มหัวเรื่องและเส้นขอบของคุณทั้งหมดใช้-primary-color การแก้ไขครั้งเดียวอัปเดตทั้งหมด
นั่นคือวิธีที่ตัวแปร CSS ทำให้การอัปเดตทั่วทั้งไซต์ง่ายขึ้น
ตัวแปร CSS ทำงานอย่างไร
ในการประกาศตัวแปร CSS ไวยากรณ์พื้นฐานมีลักษณะเช่นนี้:
.root {
--name: value;
} สิ่งที่ควรทราบ ก่อนอื่น ตัวแปร CSS จะเริ่มต้นด้วยสองขีด ( -) เสมอ นั่นคือวิธีที่เบราว์เซอร์รู้ว่ามันเองเป็นสิ่งที่ คุณ กำหนดไว้สำหรับระบบการออกแบบของคุณ
คุณสมบัติ CSS ในตัวเช่นขนาดตัวอักษรสีหรือช่องว่างภายในมีความหมายอยู่แล้ว เบราว์เซอร์รู้ว่าจะทำอย่างไรกับพวกเขา แต่คุณสมบัติที่กำหนดเองเป็นฉลากเปล่าจนกว่าคุณจะกำหนดค่า คุณกำลังสร้างกฎการออกแบบของคุณเองในโครงการเว็บไซต์เช่น-primary-color และบอกเบราว์เซอร์ว่ามันหมายถึงอะไร
ที่ที่คุณกำหนดตัวแปร CSS ของคุณก็สร้างความแตกต่างอย่างมาก
เมื่อคุณวางไว้ใน: ตัวเลือกรูท (เหมือนที่เราทำด้านบน) มันจะกลายเป็นทั่วโลก นั่นหมายความว่าคุณสามารถใช้ตัวแปรในหน้าและองค์ประกอบใดก็ได้ นั่นเป็นเพราะ: รูทกำหนดเป้าหมายองค์ประกอบระดับบนสุดของ HTML ของคุณโดยปกติแล้วแท็ก <html>
แต่ถ้าคุณกำหนดตัวแปรเดียวกันภายในคลาสหรือตัวเลือกที่เฉพาะเจาะจงมันจะใช้งานได้ในจุดเดียวเท่านั้น แบบนี้:
.card {
--bg-color: #f4f4f4;
} ที่นี่ –BG-Color ใช้เฉพาะภายในตัวเลือก. การ์ดเท่านั้น ลองใช้ที่อื่นและจะไม่ปรากฏขึ้น ตัวอย่างเช่นด้านล่างคุณจะเห็นไพ่สองใบ
การ์ด 1 ใช้ตัวแปรที่กำหนดไว้ในเครื่อง –CARD-BG ที่ประกาศไว้ในคอนเทนเนอร์. การ์ด ตัวแปรนั้นใช้งานได้ภายในคอนเทนเนอร์นั้นเท่านั้น มันไม่ได้ใช้ในการ์ด 3
ในทางกลับกันการ์ดที่ 2 ดึงพื้นหลังจาก-global-color ซึ่งกำหนดไว้ใน: รูท นั่นเป็นเหตุผลว่าทำไมการ์ด 4 ก็เลือกสีเดียวกันเช่นกัน มันสามารถเข้าถึงตัวแปรส่วนกลาง
เป็นแนวปฏิบัติที่ดีที่สุดหากคุณต้องการความสอดคล้องทั่วทั้งไซต์ของคุณให้กำหนดค่า CSS ใน: รูท ถ้าคุณกำหนดตัวแปรในพื้นที่และลืมไปแล้ว แต่ตอนนี้มันไม่ได้ผลตามที่คาดไว้ คุณจะแก้ไขปัญหานี้โดยการตั้งค่าทางเลือก เราจะพูดถึงเรื่องนี้ในขณะที่
ทำความเข้าใจกับตัวแปร CSS น้ำตก
คุณอาจคุ้นเคยกับคำว่า "น้ำตก" ตัวแปร CSS ก็เรียงซ้อนกัน แต่สิ่งนี้หมายความว่าอย่างไร?
หากตัวแปรถูกกำหนดทั้งทั่วโลก (ใน: รูท) และในพื้นที่ (ภายในคลาสหรือคอนเทนเนอร์) เบราว์เซอร์จะใช้หนึ่งที่อยู่ใกล้กับองค์ประกอบเสมอ นี่คือวิธีการทำงานแบบเรียงซ้อนใน CSS กฎที่ใกล้ชิดยิ่งขึ้นมีความสำคัญ
และนั่นคือวิธีการทำงานของโหมดมืด
ตัวอย่างเช่นคุณอาจกำหนด-ข้อความสี: ดำใน: รูท แต่ภายในคอนเทนเนอร์. ดาร์กโหมดคุณสามารถกำหนดใหม่เป็นสีขาวได้ ดังนั้นเมื่อผู้ใช้สลับกับตัวเลือกโหมดมืดเบราว์เซอร์จะใช้เวอร์ชันท้องถิ่นภายใน. dark-mode แม้ว่าชื่อตัวแปรจะยังคงเหมือนเดิม
สิ่งนี้จะช่วยให้คุณทำให้การตั้งชื่อของคุณสอดคล้องกันในขณะที่ปรับรูปแบบตามบริบท มันเป็นวิธีหนึ่งที่ตัวแปร CSS ไปไกลกว่าการใช้ซ้ำง่าย พวกเขาปรับตัวตามสถานที่และวิธีการใช้งาน
การเพิ่มค่าทางเลือก
บางครั้งคุณอาจอ้างอิงตัวแปร CSS ที่ไม่สามารถใช้ได้ บางทีมันอาจถูกกำหนดไว้ในส่วนที่เฉพาะเจาะจงเท่านั้นหรือถูกลบออกโดยไม่ได้ตั้งใจ เมื่อสิ่งนั้นเกิดขึ้นเบราว์เซอร์ไม่รู้ว่าจะทำอย่างไร สไตล์ที่ขึ้นอยู่กับตัวแปรนั้นจะไม่ถูกนำไปใช้
คุณสามารถเพิ่มค่าทางเลือกได้โดยตรงภายในฟังก์ชั่น var () เพื่อป้องกันไม่ให้ มันทำหน้าที่เป็นสำรองในกรณีที่ตัวแปรดั้งเดิมหายไป นี่คือวิธีการทำงาน:
h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} สิ่งนี้บอกให้เบราว์เซอร์ใช้-หัวสีถ้ามันมีอยู่ ถ้าไม่ใช้ Black (#000) แทน
การโทรกลับมีประโยชน์อย่างยิ่งเมื่อสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้หรือทำงานในหลายส่วนที่ตัวแปรอาจไม่สามารถใช้ได้เสมอไป พวกเขาทำให้การออกแบบของคุณมั่นคงและสอดคล้องกัน
คุณยังสามารถใช้สายคลอดได้เช่นสี: var (–Accent-color, var (-สีสัน-สี, #333));
ที่นี่เบราว์เซอร์ตรวจสอบ –accent-color ก่อน ถ้ามันหายไปมันจะลอง-สีสันที่ดี หากสิ่งนั้นหายไปก็จะเริ่มต้นที่ #333 สิ่งนี้จะช่วยให้สไตล์ของคุณมีตาข่ายความปลอดภัยดังนั้นพวกเขาจึงยังคงแสดงผลอย่างถูกต้องแม้ว่าค่าบางอย่างจะหายไป
วิธีที่ไม่มีรหัสในการใช้ตัวแปร CSS ใน Divi 5
ทุกสิ่งที่คุณเห็นเกี่ยวกับตัวแปร CSS (การควบคุมทั่วโลกค่าที่นำกลับมาใช้ใหม่ตรรกะการเรียงซ้อน) ฟังดูดี แต่ก็มาพร้อมกับการจับ: คุณต้องเขียนและจัดการรหัส สำหรับนักออกแบบหลายคนนั่นไม่เหมาะ ถ้าคุณชอบการออกแบบภาพ? นั่นหมายความว่าคุณไม่สามารถใช้ตัวแปร CSS ใช่ไหม? ผิด.
Divi 5 ให้วิธีการที่เร็วขึ้นและมีภาพมากขึ้นในการทำงานกับตรรกะตัวแปร CSS เดียวกัน มันแนะนำตัวแปรการออกแบบซึ่งเป็นทางเลือกที่ไม่มีรหัสสำหรับตัวแปร CSS ที่สร้างขึ้นในตัวสร้าง Divi
สมัครสมาชิกช่อง YouTube ของเรา
ตัวแปรการออกแบบ ( เช่นตัวแปร CSS) เป็นค่าที่สามารถนำมาใช้ซ้ำได้ที่คุณกำหนดหนึ่งครั้งและใช้ทั่วเว็บไซต์ของคุณ สิ่งที่แตกต่างคือวิธีที่คุณทำ คุณไม่ได้กำหนดไว้ในสไตล์ชีทของเว็บไซต์ของคุณ แต่อยู่ใน ตัวแปรตัวแปร ภายใน Divi Builder ซึ่งมองเห็นได้
เช่นเดียวกับตัวแปร CSS คุณให้ชื่อตัวแปรการออกแบบและกำหนดค่า เมื่อบันทึกแล้วจะมีอยู่ในโมดูลใด ๆ ที่รองรับคุณสมบัตินั้น
การใช้ตัวแปรที่บันทึกไว้นั้นง่ายเช่นกัน เพียงค้นหาไอคอน ตัวจัดการตัวแปร โดยวางเมาส์เหนือตัวเลือกการตั้งค่าของโมดูลคลิกที่มันเพื่อเติมตัวแปรที่บันทึกไว้ทั้งหมดของคุณและเลือกตัวเลือกที่คุณต้องการใช้
ส่วนที่ดีที่สุดเกี่ยวกับตัวแปรการออกแบบคือไม่เพียง แต่ค่าการออกแบบ แต่คุณยังสามารถบันทึกค่าเนื้อหาที่ทำซ้ำได้เช่นรูปภาพลิงก์และสตริงข้อความ ด้วยวิธีนี้คุณจะจัดการเนื้อหาซ้ำได้อย่างมีประสิทธิภาพโดยนำองค์ประกอบเนื้อหาทั่วไปกลับมาใช้ใหม่ทั่วทั้งเว็บไซต์ของคุณโดยไม่ต้องทำงานด้วยตนเอง
เรียนรู้ทุกอย่างเกี่ยวกับตัวแปรการออกแบบของ Divi 5
กำหนดตัวแปร CSS ใน Divi 5
นี่หมายถึงตัวแปรการออกแบบแทนที่ตัวแปร CSS หรือไม่? ไม่แน่นอน
ตัวแปรการออกแบบนั้นยอดเยี่ยมสำหรับการจัดเก็บค่าที่คุณใช้บ่อยเช่นสีของแบรนด์ แต่ไม่ใช่ทุกสไตล์ที่ต้องเป็นระดับโลก คุณจะไม่ต้องการบันทึกการปรับแต่งเล็กน้อยทุกครั้งเป็นตัวแปรการออกแบบโดยเฉพาะอย่างยิ่งเมื่อมันไม่ซ้ำกับหน้าเดียว
สมมติว่าคุณกำลังสร้างหน้า Landing Page ด้วยส่วนฮีโร่ที่กำหนดเอง ความสูงแตกต่างจากสิ่งอื่นใดในเว็บไซต์และคุณไม่น่าจะนำกลับมาใช้ใหม่ การบันทึกว่าเป็นตัวแปรการออกแบบไม่ใช่การใช้ห้องสมุดทั่วโลกที่ดีที่สุด ในกรณีนี้การกำหนดตัวแปร CSS โดยตรงในการตั้งค่าหน้าเว็บเป็นตัวเลือกที่สะอาดกว่า
เช่นเดียวกับเลย์เอาต์ที่ซับซ้อนหรือแบบครั้งเดียว บางทีคุณอาจต้องใช้สีไฮไลต์ที่กำหนดเองหรือค่าระยะห่างเฉพาะเลย์เอาต์ที่เกี่ยวข้องในบริบทนั้นเท่านั้น แทนที่จะเบียดเสียดระบบของคุณด้วยตัวแปรที่คุณจะไม่นำกลับมาใช้ใหม่คุณสามารถกำหนดตัวแปร CSS ได้อย่างถูกต้องในที่ที่คุณต้องการ
เราไม่ต้องการให้คุณแทนที่ตัวแปร CSS ด้วยตัวแปรการออกแบบ เราต้องการให้คุณใช้สิ่งที่ดีที่สุดของทั้งคู่
นั่นเป็นเหตุผลที่ Divi 5 ทำให้ตัวแปร CSS ง่ายขึ้น คุณสามารถประกาศตัวแปร CSS ของคุณเองได้อย่างง่ายดายภายใน การตั้งค่าหน้าเว็บ> ขั้นสูง> CSS ที่กำหนดเอง เช่นเดียวกับที่คุณทำใน CSS ปกติ
แต่เราทำให้แอปพลิเคชันของพวกเขาง่ายขึ้นสำหรับคุณ เมื่อกำหนดแล้วคุณสามารถใช้ตัวแปรเหล่านี้ในหน้านั้น ไปที่โมดูลใด ๆ เลือก CSS VAR จากดรอปดาวน์หน่วยขั้นสูงและป้อนชื่อตัวแปรภายในฟังก์ชัน var ()
วิธีการนี้จะช่วยให้คุณมีความยืดหยุ่นเมื่อจำเป็นโดยไม่ต้องบังคับให้คุณทำทุกอย่างให้กับระบบตัวแปรการออกแบบภาพ มันเป็นความสมดุลระหว่างโครงสร้างและเสรีภาพในการสร้างสรรค์
ใช้ตัวแปร CSS ใน Divi 5
Divi 5 สร้างเวิร์กโฟลว์ตัวแปร CSS ได้อย่างง่ายดายอย่างไร
ตอนนี้คุณรู้แล้วว่าตัวแปร CSS คืออะไรและ Divi 5 สนับสนุนพวกเขาด้วยสายตาอย่างไรนี่คือสาเหตุที่สำคัญจริงๆ ไม่ใช่เพียงเพราะ Divi ให้สองวิธีในการใช้ตัวแปร CSS เป็นเพราะมันทำให้พวกเขารวมเข้ากับเวิร์กโฟลว์ของคุณได้อย่างราบรื่น
คุณสามารถใช้ตัวแปร CSS ได้อย่างง่ายดายด้วยคุณสมบัติที่ทรงพลังเช่นตัวแปรการออกแบบตัวเลือกที่ตั้งไว้ล่วงหน้าและหน่วยขั้นสูง คุณยังคงได้รับความยืดหยุ่นและความสามารถในการปรับขนาดของ CSS แบบดั้งเดิม แต่ไม่ได้เขียนรหัสบรรทัดเดียวเว้นแต่คุณจะเลือก
ลองเดินผ่าน Divi 5 นำเวิร์กโฟลว์นี้มาสู่ชีวิต
1. สร้างกรอบการออกแบบของคุณ
ตัวแปรการออกแบบนั้นทรงพลังมากเพราะคุณสามารถสร้างกรอบการออกแบบทั้งหมดของคุณด้วยสายตาดังนั้นการจัดแต่งทรงผมหน้าต้องใช้เพียงไม่กี่คลิก เราขอแนะนำให้เริ่มต้นด้วยองค์ประกอบการออกแบบพื้นฐานของคุณเช่นขนาดตัวอักษรหน่วยระยะห่างและสีของแบรนด์ดังนั้นคุณจึงมีทั้งหมดในที่เดียว
จากนั้นคุณสามารถบันทึกเนื้อหาที่ใช้บ่อยเช่นสตริงข้อความ url และรูปภาพ ตัวอย่างเช่นลวดลายพื้นหลังทั่วไปที่ทำซ้ำในส่วนต่าง ๆ ลิงก์โซเชียลมีเดียอีเมลที่อยู่ ฯลฯ
เมื่อคุณมีเฟรมเวิร์กของคุณทุกอย่างจะง่ายขึ้น คุณไม่จำเป็นต้องกลับไปที่สไตล์ชีทรูทเพื่อค้นหาตัวแปรหรือจดจำชื่อที่แน่นอน Divi จัดระเบียบให้คุณ: Colors in the Color Tab, Fonts in the Font Tab และทั้งหมดที่สามารถเข้าถึงได้ภายใน ตัวจัดการตัวแปร
และเมื่อเว็บไซต์ของคุณต้องการการอัปเดตการออกแบบคุณจะไม่เสียเวลาแก้ไขโมดูลโดยโมดูลหรือการล่าสัตว์ผ่านสไตล์ชีทยาว คุณจะอัปเดตค่าที่บันทึกไว้ใน ตัวจัดการตัวแปร หนึ่งครั้งและการเปลี่ยนแปลงของคุณจะใช้ได้ทันทีในทุก ๆ อินสแตนซ์
การควบคุมระดับ CSS เดียวกัน แต่ไม่จำเป็นต้องจดจำเขียนหรือดีบักอะไรเลย
2. ใช้ตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้าสำหรับการจัดแต่งทรงผมที่ยืดหยุ่น
กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าให้รายละเอียดเพิ่มเติมเกี่ยวกับระบบการออกแบบของคุณ แทนที่จะใช้รูปแบบชุดเดียวในเว็บไซต์ของคุณคุณสามารถสร้างตัวเลือกการออกแบบหลายกลุ่มสำหรับกรณีการใช้งานที่แตกต่างกันทั้งหมดที่สร้างขึ้นจากตัวแปรการออกแบบพื้นฐานเดียวกัน
ที่นี่คุณเป็นสไตล์การเลเยอร์ คุณกำหนดค่าหลักของคุณหนึ่งครั้งในตัวจัดการตัวแปรจากนั้นสร้างที่ตั้งไว้ล่วงหน้าที่ดึงออกมาจากค่าเหล่านั้น แต่ใช้ในรูปแบบที่แตกต่างกันเล็กน้อย หากคุณเคยอัปเดตค่าตัวแปรที่บันทึกไว้การเปลี่ยนแปลงจะสะท้อนให้เห็นถึงการตั้งค่าล่วงหน้าทั้งหมดและโมดูลที่ใช้งานได้ทันที
ระบบการออกแบบที่ตั้งไว้ล่วงหน้านี้ช่วยให้คุณสร้างชุดรูปแบบไม่ จำกัด ตัวอย่างเช่นคุณอาจมีรูปแบบหัวข้อหนึ่งสำหรับฮีโร่หน้าแรกของคุณและอีกรูปแบบหนึ่งสำหรับชื่อบล็อกทั้งสองใช้ตัวแปรขนาดตัวอักษรเดียวกัน แต่มีระยะห่างที่แตกต่างกันน้ำหนักหรือการแปลงข้อความ
โครงสร้างยังคงสะอาด สไตล์ยังคงสอดคล้องกัน และเมื่อจำเป็นคุณสามารถแทนที่ที่ตั้งไว้ล่วงหน้าใด ๆ ที่ระดับโมดูล ดังนั้นคุณจะได้รับการควบคุมทั่วทั้งระบบโดยไม่สูญเสียเสรีภาพในการสร้างสรรค์
3. ประกาศตัวแปร CSS ที่กำหนดเองสำหรับการควบคุมเพิ่มเติม
อย่างที่คุณทราบ Divi ไม่ได้ล็อคคุณออกจากการควบคุมขั้นสูง หากคุณต้องการกำหนดตัวแปร CSS ของคุณเองคุณสามารถทำได้อย่างแน่นอนผ่าน การตั้งค่าหน้าเว็บ> ขั้นสูง> CSS ที่กำหนดเอง แต่นั่นไม่ใช่ส่วนที่สนุก
สิ่งที่สนุกคือมันช่วยให้คุณใช้ฟังก์ชั่น CSS ที่ทรงพลังเช่น Clamp () และ Cal () (ขอบคุณหน่วยขั้นสูง) เพื่อสร้างเลย์เอาต์ของเหลวที่ตอบสนองได้ คุณยังสามารถใช้ตัวแปร CSS ที่บันทึกไว้เป็นค่าสำหรับตัวแปรการออกแบบของคุณ
สิ่งนี้ช่วยให้คุณสร้างระบบการออกแบบที่เชื่อมต่อถึงกันมากขึ้น ตรรกะ CSS ของคุณและสไตล์การมองเห็นไม่มีอยู่ในไซโลแยกกันอีกต่อไป คุณสามารถกำหนดค่าหนึ่งครั้งใน CSS และดึงออกมาจากที่ใดก็ตามที่ต้องการ มันช่วยให้ของเหลวเวิร์กโฟลว์ปรับขนาดได้และง่ายต่อการบำรุงรักษา
คุณอาจพบว่าสิ่งนี้ล้นหลาม แต่เมื่อคุณเข้าใจว่ามันทำงานร่วมกันได้อย่างไรก็จะไม่กลับไป มันเปลี่ยนวิธีการออกแบบคิดและสร้าง สิ่งที่เริ่มต้นเป็นระบบของตัวแปรอย่างรวดเร็วกลายเป็นภาษาการออกแบบของคุณ และใช่เครื่องมือเหล่านี้มีประสิทธิภาพ แต่พวกเขาตั้งใจที่จะมีรูปร่างรอบกระบวนการของคุณ ใช้เวลาของคุณสำรวจสิ่งที่เหมาะกับสไตล์ของคุณและสร้างเวิร์กโฟลว์ที่เหมาะกับคุณ
Divi เสนอวิธีการในตัวสำหรับตัวแปร CSS
การออกแบบด้วยตัวแปร CSS ที่ใช้หมายถึงการเลือกระหว่างความยืดหยุ่นและความซับซ้อน Divi 5 ลบออกและนำพลังของตัวแปรเต็มรูปแบบ การควบคุมภาพการอัปเดตทั่วทั้งไซต์และตรรกะเลเยอร์ มาสู่เวิร์กโฟลว์ที่ใช้งานง่ายและปรับขนาดได้
คุณไม่จำเป็นต้องเลือกระหว่าง CSS ที่กำหนดเองและการออกแบบที่ไม่มีรหัส คุณสามารถผสมผสานจับคู่และพัฒนาระบบของคุณเมื่อโครงการของคุณเติบโต และเมื่อคุณเห็นว่ามันราบรื่นและทรงพลังเพียงใดมันยากที่จะจินตนาการว่าการสร้างวิธีอื่น แต่สำหรับสิ่งนั้นคุณต้องควบคุมมือของคุณ
ลอง Divi 5 ด้วยตัวคุณเองและสร้างระบบการออกแบบที่ทำงานร่วมกับคุณไม่ใช่กับคุณ