Articles
บทนำสู่ SASS/SCSS
การจัดการข้อผิดพลาดใน SASS

การจัดการข้อผิดพลาดใน SASS

บทความนี้อธิบายเกี่ยวกับการจัดการข้อผิดพลาดใน SASS

เราจะอธิบายวิธีสร้างดีไซน์สไตล์ที่แข็งแกร่งโดยใช้ฟีเจอร์ error, warning และ debug ของ SASS

YouTube Video

การจัดการข้อผิดพลาดใน SASS

'Error Handling' หรือการจัดการข้อผิดพลาดใน SASS คืออะไร?

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

ใน SASS การจัดการข้อผิดพลาดไม่ได้หมายถึงการ 'หยุดเมื่อล้มเหลว' เท่านั้น แต่ยังเป็น วิธีแสดงสมมติฐานการออกแบบในโค้ดอย่างชัดเจน โดยหลักแล้วมี 4 วิธีที่ใช้สำหรับสิ่งนี้

จะหยุดคอมไพล์ทันทีเมื่อพบเงื่อนไขที่ไม่เป็นไปตามที่ออกแบบไว้

แจ้งเตือนปัญหาแบบ warning แต่การคอมไพล์จะดำเนินต่อไป

แสดงค่า variables และผลลัพธ์การคำนวณเพื่อช่วยตรวจสอบการไหลของค่าและสถานะภายใน

  • Guard Conditions (@if) ตรวจสอบค่าที่รับเข้ามาและเงื่อนไขล่วงหน้าเพื่อป้องกันปัญหาก่อนที่จะเกิดขึ้น

@error: หยุดข้อผิดพลาดร้ายแรงได้อย่างแม่นยำ

ใช้ @error สำหรับ สถานะที่ไม่สามารถยอมรับได้ในดีไซน์ หากมีการส่งค่าที่ไม่ถูกต้องเข้ามา การคอมไพล์จะล้มเหลวทันที

1@mixin set-width($width) {
2  @if type-of($width) != number {
3    @error "Width must be a number.";
4  }
5
6  width: $width;
7}
  • มิกซ์อินนี้จะหยุดการ build หากได้รับค่านอกเหนือจากเลข นี่เป็นเหมือน 'เกราะป้องกันสุดท้าย' เพื่อป้องกันการใช้งานที่ไม่ถูกต้องโดยไม่ได้ตั้งใจ

การใช้งานจริงของ @error รวมถึงการตรวจสอบหน่วย

ถึงจะเป็นตัวเลข แต่ถ้าใช้หน่วยผิดก็อาจเกิดปัญหาได้ ใน SASS คุณสามารถใช้ unit() เพื่อตรวจสอบหน่วย

1@mixin set-padding($value) {
2  @if unit($value) != "px" {
3    @error "Padding must be specified in px.";
4  }
5
6  padding: $value;
7}
  • แบบนี้จะสามารถจับได้ทันทีหากมีการส่ง 1rem หรือ % ที่ผิดเข้ามา สิ่งสำคัญคือ คุณสามารถกำหนดกฎดีไซน์ให้อยู่ในรูปของโค้ดได้

@warn: สำหรับแจ้งเตือนเลิกใช้หรือ warning

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

1@mixin legacy-color($color) {
2  @warn "legacy-color is deprecated. Use theme-color instead.";
3
4  color: $color;
5}
  • มิกซ์อินนี้แจ้งเตือนแบบ warning โดยไม่ทำให้โค้ดเดิมเสีย มีประสิทธิภาพเป็นพิเศษขณะ refactor ในโปรเจกต์ขนาดใหญ่

รูปแบบการแจ้งเตือนแบบมีเงื่อนไข

จะมีประโยชน์ยิ่งขึ้นเมื่อใช้ร่วมกับการตรวจสอบช่วงของค่า

1@mixin set-opacity($value) {
2  @if $value < 0 or $value > 1 {
3    @warn "Opacity should be between 0 and 1.";
4  }
5
6  opacity: $value;
7}
  • คุณสามารถแจ้งข้อผิดพลาดด้านดีไซน์โดยไม่หยุดการพัฒนา จุดเด่นของ @warn คือสามารถเลือกได้ว่าจะเข้มงวดมากน้อยแค่ไหน

@debug: ใช้แสดงการไหลของค่า

@debug เป็น เครื่องมือสำหรับสังเกตและค้นหาปัญหา มากกว่าการจัดการข้อผิดพลาด สามารถเช็คผลลัพธ์การคำนวณและค่าในตัวแปรต่าง ๆ ได้

1$base-size: 8px;
2$spacing: $base-size * 3;
3
4@debug $spacing;
  • เนื่องจากจะแสดงค่าออกมา ณ ตอนคอมไพล์ จึงช่วยตรวจสอบลอจิกที่ซับซ้อนได้ดี ไม่ควรปล่อยให้โค้ดนี้อยู่ใน production ควรใช้เฉพาะเพื่อการตรวจสอบเท่านั้น

การวางเงื่อนไขป้องกัน (guard) ด้วย @if สำคัญที่สุด

ในทางปฏิบัติ การออกแบบให้ตรวจสอบ input และเงื่อนไขต่าง ๆ แต่เนิ่น ๆ สำคัญที่สุด ก่อนจะใช้ @error หรือ @warn

1@mixin grid-columns($count) {
2  @if type-of($count) != number or $count <= 0 {
3    @error "Column count must be a positive number.";
4  }
5
6  grid-template-columns: repeat($count, 1fr);
7}
  • ด้วยการระบุ pre-condition ให้ชัดเจน มิกซ์อินและฟังก์ชันของคุณจะเข้าใจง่ายมากขึ้น

การจัดการข้อผิดพลาดในฟังก์ชัน (@function)

คุณสามารถจัดการข้อผิดพลาดในฟังก์ชันได้เหมือนกับมิกซ์อิน สิ่งนี้สำคัญอย่างยิ่งในลอจิกการคำนวณ

1@function divide($a, $b) {
2  @if $b == 0 {
3    @error "Division by zero is not allowed.";
4  }
5
6  @return $a / $b;
7}
  • เนื่องจากตรวจพบลอจิกที่ผิดได้ก่อนสร้าง CSS ทำให้ระบบดีไซน์ของคุณปลอดภัยขึ้น

แนวทางการใช้งานในทางปฏิบัติ

สุดท้ายขอสรุปเกณฑ์การเลือกใช้แต่ละกรณี โดยมุ่งเน้นประเด็นที่มักตัดสินใจยากในทางปฏิบัติ

  • เมื่อพบการละเมิดดีไซน์หรือบั๊กที่ชัดเจน ใช้ @error หากสร้าง CSS ในสถานะที่ไม่ถูกต้องจะเกิดบั๊กโดยตรง จึงควรหยุดการคอมไพล์ทันที

  • เมื่อคุณต้องการแจ้งเตือนการเลิกใช้หรือแค่ต้องการ warning ใช้ @warn สามารถดำเนินการต่อโดยไม่ทำให้โค้ดเดิมเสียหายหรือขณะย้ายระบบ พร้อมกับแจ้งปัญหาในอนาคต

  • เมื่อคุณต้องการตรวจสอบการไหลของค่าหรือผลลัพธ์การคำนวณ ใช้ @debug เป็นวิธีตรวจสอบลอจิกหรือค้นหาสาเหตุปัญหาในช่วงทดลองที่มีประสิทธิภาพ

  • เมื่อคุณต้องการตรวจสอบ precondition ทั้งหมด เช่น ค่าที่ใส่หรือสภาพการใช้งาน ใช้ guard ด้วย @if ด้วยการระบุข้อสมมติฐานอย่างชัดเจน คุณจะป้องกันปัญหาก่อนจะเกิดได้

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

สรุป

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

  • ข้อผิดพลาดมีไว้เพื่อให้สถานะที่ผิดพลาดไม่ถูกมองข้ามและหยุดได้ทันที
  • Warning เป็นเหมือนคำแนะนำให้เปลี่ยนแปลงหรือย้ายระบบในอนาคตอย่างปลอดภัยโดยไม่ทำให้โค้ดพังทันที
  • Guard ใช้ในการออกแบบเพื่อป้องกันไม่ให้เกิดปัญหาตั้งแต่ต้น แทนที่จะรอแก้ไขหลังปัญหาเกิดขึ้นแล้ว

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

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

YouTube Video

SASS และ BEM