Articles
Giới thiệu về SASS/SCSS
Xử lý lỗi trong SASS

Xử lý lỗi trong SASS

Bài viết này giải thích về cách xử lý lỗi trong SASS.

Chúng tôi sẽ giải thích cách xây dựng thiết kế style vững chắc bằng cách sử dụng các tính năng lỗi, cảnh báo và debug của SASS.

YouTube Video

Xử lý lỗi trong SASS

'Xử lý lỗi' trong SASS là gì?

SASS không phải là ngôn ngữ xử lý ngoại lệ khi chạy, nhưng nó cung cấp cơ chế để phát hiện trạng thái không hợp lệ trong quá trình biên dịch và thông báo rõ ràng cho lập trình viên. Điều này giúp ngăn chặn giá trị sai hoặc sai sót thiết kế bị sinh ra thành CSS mà không ai nhận ra.

Trong SASS, xử lý lỗi không chỉ là 'dừng lại khi có lỗi', mà còn là cách thể hiện các giả định thiết kế trực tiếp trong mã. Có bốn phương pháp chính được cung cấp cho việc này.

Dừng biên dịch ngay lập tức khi phát hiện một điều kiện không được phép theo thiết kế.

Thông báo các vấn đề dưới dạng cảnh báo, nhưng quá trình biên dịch vẫn tiếp tục.

Xuất giá trị biến và kết quả tính toán để giúp xác nhận dòng chảy giá trị và trạng thái bên trong.

  • Điều kiện bảo vệ (@if) Kiểm tra giá trị đầu vào và điều kiện trước để ngăn chặn sự cố trước khi chúng xảy ra.

@error: Dừng chắc chắn khi gặp lỗi nghiêm trọng

Sử dụng @error cho các trạng thái hoàn toàn không chấp nhận được trong thiết kế của bạn. Nếu một giá trị sai được truyền vào, biên dịch sẽ thất bại ngay lập tức.

1@mixin set-width($width) {
2  @if type-of($width) != number {
3    @error "Width must be a number.";
4  }
5
6  width: $width;
7}
  • Mixin này sẽ dừng việc build nếu có giá trị không phải số được truyền vào. Đây là biện pháp bảo vệ cuối cùng rất hiệu quả để ngăn chặn việc sử dụng không mong muốn.

Sử dụng thực tế @error bao gồm cả kiểm tra đơn vị

Ngay cả khi là con số, dùng sai đơn vị cũng có thể gây vấn đề. Trong SASS, bạn có thể dùng unit() để kiểm tra đơn vị.

1@mixin set-padding($value) {
2  @if unit($value) != "px" {
3    @error "Padding must be specified in px.";
4  }
5
6  padding: $value;
7}
  • Bằng cách này, truyền nhầm giá trị như 1rem hoặc % có thể được phát hiện ngay lập tức. Việc có thể thực thi các quy tắc thiết kế như mã là rất quan trọng.

@warn: Dùng cho thông báo ngưng dùng và cảnh báo

@warn được dùng để thông báo về các điều kiện không mong muốn mà không làm hỏng hệ thống ngay lập tức. Vì CSS vẫn được sinh ra, nó phù hợp cho quá trình chuyển đổi dần dần.

1@mixin legacy-color($color) {
2  @warn "legacy-color is deprecated. Use theme-color instead.";
3
4  color: $color;
5}
  • Mixin này đưa ra cảnh báo mà không làm hỏng mã hiện có. Nó đặc biệt hiệu quả khi refactor trong các dự án lớn.

Mẫu để đưa ra cảnh báo có điều kiện

Nó hiệu quả thực tế hơn khi kết hợp với kiểm tra khoảng giá trị.

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}
  • Bạn có thể thông báo về lỗi thiết kế mà không cần dừng phát triển. Điểm mạnh của @warn là bạn có thể lựa chọn mức độ nghiêm khắc.

@debug: Trực quan hóa luồng giá trị

@debug là một công cụ quan sát để nhận diện vấn đề, hơn là công cụ xử lý lỗi. Bạn có thể kiểm tra kết quả tính toán và giá trị của các biến.

1$base-size: 8px;
2$spacing: $base-size * 3;
3
4@debug $spacing;
  • Vì giá trị được xuất ra khi biên dịch, nó giúp xác minh logic tính toán phức tạp. Không để lại trong mã sản xuất; chỉ sử dụng cho mục đích điều tra.

Thiết kế bảo vệ bằng @if là quan trọng nhất

Trên thực tế, thiết kế xác thực dữ liệu đầu vào trước là quan trọng nhất — trước khi dùng tới @error hoặc @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}
  • Bằng cách chỉ rõ 'điều kiện tiên quyết đúng' như vậy, các mixin và function của bạn trở nên dễ hiểu hơn.

Xử lý lỗi trong các hàm (@function)

Bạn có thể xử lý lỗi trong hàm giống như với mixin. Điều này đặc biệt quan trọng trong logic tính toán.

1@function divide($a, $b) {
2  @if $b == 0 {
3    @error "Division by zero is not allowed.";
4  }
5
6  @return $a / $b;
7}
  • Vì bạn có thể phát hiện lỗi logic trước khi CSS được sinh ra, độ an toàn của hệ thống thiết kế sẽ được nâng cao.

Hướng dẫn sử dụng trong thực tế

Cuối cùng, chúng ta hãy tóm tắt tiêu chí lựa chọn phù hợp giữa chúng, tập trung vào những điều thường khó quyết định trên thực tế.

  • Khi phát hiện rõ ràng vi phạm thiết kế hoặc lỗi Dùng @error. Bởi vì sinh ra CSS trong trạng thái không đúng sẽ dẫn đến bug, nên quá trình biên dịch sẽ dừng ngay lập tức.

  • Khi bạn muốn thông báo ngưng dùng hoặc chỉ đưa ra cảnh báo Dùng @warn. Bạn có thể chạy mà không làm hỏng mã hiện tại hoặc mã đang chuyển đổi, đồng thời thông báo về vấn đề tương lai.

  • Khi bạn muốn xác nhận luồng giá trị hoặc kết quả tính toán Dùng @debug. Nó hiệu quả như một biện pháp tạm thời để kiểm tra logic hoặc điều tra nguyên nhân.

  • Khi bạn muốn xác thực mọi điều kiện đầu vào, như giá trị nhập hoặc điều kiện sử dụng Dùng điều kiện bảo vệ với @if. Bằng cách thể hiện rõ các giả định, bạn có thể ngăn ngừa sự cố trước khi nó xảy ra.

Vì SASS là ngôn ngữ nơi bạn 'có thể viết gần như bất cứ gì', thiết kế xác định rõ các trạng thái không mong muốn trong mã sẽ giúp style dễ bảo trì và ít lỗi về lâu dài.

Tóm tắt

Xử lý lỗi trong SASS là cơ chế thể hiện rõ ràng và áp dụng liên tục các giả định và quy tắc cho thiết kế style trong mã nguồn.

  • Lỗi tồn tại để trạng thái không hợp lệ không bị bỏ sót và có thể được dừng lại ngay lập tức.
  • Cảnh báo đóng vai trò là hướng dẫn để thay đổi hoặc chuyển đổi trong tương lai một cách an toàn mà không làm hỏng hệ thống ngay.
  • Các điều kiện bảo vệ được dùng để thiết kế nhằm ngăn sự cố xảy ra ngay từ đầu, thay vì xử lý sau khi đã có lỗi.

Bằng cách hiểu và sử dụng đúng các phương pháp này, SASS không chỉ là phần mở rộng của CSS mà còn là ngôn ngữ thiết kế đáng tin cậy, có thể diễn đạt ý định và ràng buộc.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

SASS và BEM