แฟล็ก `!global` ใน SASS

บทความนี้อธิบายเกี่ยวกับธง !global ใน SASS

เราจะอธิบายกลไกโดยละเอียด ตัวอย่างการใช้งาน และข้อควรระวังของธง !global

YouTube Video

แฟล็ก !global ใน SASS

ใน SASS แฟล็ก !global ใช้สำหรับจัดการขอบเขตของตัวแปร หากเข้าใจและใช้งานแฟล็กนี้อย่างถูกต้อง คุณจะสามารถหลีกเลี่ยงพฤติกรรมที่ไม่คาดคิดในโค้ดและเพิ่มความง่ายต่อการดูแลรักษา

!global คืออะไร?

โดยปกติ ตัวแปรใน SASS จะมีขอบเขตการใช้งาน โดยเริ่มต้น ตัวแปรจะใช้ได้ภายในขอบเขตที่กำหนดไว้เท่านั้น กล่าวคือ ถ้ากำหนดตัวแปรภายในฟังก์ชันหรือมิกซ์อิน จะไม่สามารถเข้าถึงตัวแปรนั้นจากข้างนอกได้

แต่หากใช้แฟล็ก !global คุณสามารถกำหนดค่าตัวแปรไปที่ขอบเขต global ได้โดยตรง ซึ่งจะทำให้ตัวแปรเหล่านั้นสามารถใช้งานข้ามขอบเขตต่าง ๆ ได้

เมื่อไม่มีแฟล็ก !global

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• ในโค้ดนี้ $color ถูกกำหนดในขอบเขต global ดังนั้น property color ของ .change จะยังคงเป็น red

ผลลัพธ์ CSS

1.change {
2    color: red;
3}

เมื่อใช้แฟล็ก !global

ลองเพิ่มแฟล็ก !global ในตัวอย่างเดียวกัน

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• ในกรณีนี้ เนื่องจากใช้แฟล็ก !global ค่า $color จึงถูกอัปเดตในขอบเขต global ผลลัพธ์คือ property color ของ .change จะเปลี่ยนเป็น blue

ผลลัพธ์ CSS

1.change {
2    color: blue;
3}

ข้อควรระวังในการใช้งาน

• การสร้างมลพิษในขอบเขต global การใช้แฟล็ก !global มากเกินไปอาจทำให้เกิดความขัดแย้งในขอบเขตตัวแปรและสร้างมลพิษใน global scope ได้ สิ่งนี้สำคัญเป็นพิเศษในโครงการขนาดใหญ่ ซึ่งควรหลีกเลี่ยงการใช้แฟล็กนี้มากเกินไป

• การเขียนทับค่าที่ไม่ตั้งใจ เมื่อใช้แฟล็ก !global ตัวแปรที่มีชื่อเดียวกันอาจถูกเขียนทับโดยไม่ตั้งใจในที่อื่น ดังนั้น การตั้งชื่อตัวแปรให้ชัดเจนและสอดคล้องกันจึงเป็นสิ่งจำเป็น

ตัวอย่างการใช้งานจริง

ต่อไปนี้คือตัวอย่างของการใช้แฟล็ก !global อย่างถูกต้อง

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• ในโค้ดนี้ mixin set-theme สามารถใช้สลับธีมได้แบบไดนามิก เนื่องจากตัวแปร global ถูกอัปเดตสำหรับแต่ละธีม ทำให้สามารถจัดการหลายธีมได้อย่างยืดหยุ่น

ผลลัพธ์ CSS

1body {
2    background-color: #333333;
3    color: #666666;
4}

ข้อผิดพลาดที่พบบ่อยและวิธีรับมือ

ลืมใส่แฟล็ก

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

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

การพึ่งพาขอบเขต global มากเกินไป

การพึ่งพาแฟล็ก !global มากเกินไปอาจทำให้การดีบักและดูแลรักษาโค้ดยากขึ้น ควรใช้ให้น้อยที่สุดเท่าที่เป็นไปได้

สรุป

แฟล็ก !global ใน SASS มีประโยชน์มากในบางสถานการณ์ แต่ควรใช้อย่างระมัดระวัง ด้วยความเข้าใจขอบเขตของตัวแปรอย่างชัดเจนและการจัดการขอบเขต global อย่างเหมาะสม คุณจะสามารถสร้างโค้ด SASS ที่ดูแลรักษาได้ง่าย

ต่อไปนี้คือประเด็นสำคัญที่ควรคำนึงถึง:

1. ตัวแปรจะขึ้นอยู่กับขอบเขตโดยปกติ

2. แฟล็ก !global ช่วยให้คุณสามารถอัปเดตตัวแปรในขอบเขต global ได้

3. ใช้แฟล็กเท่าที่จำเป็นและหลีกเลี่ยงการเขียนทับโดยไม่ตั้งใจเท่าที่จะเป็นไปได้

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video