Lệnh `@forward` trong SASS

Bài viết này giải thích về @forward trong SASS.

Chúng tôi sẽ giải thích @forward một cách dễ hiểu, bao gồm cả các ví dụ thực tiễn.

YouTube Video

Lệnh @forward trong SASS

@forward là gì?

Trong hệ thống module của SASS, bạn sử dụng @use và @forward thay vì @import. @forward là một tính năng quan trọng giúp giữ cho kiến trúc của bạn sạch sẽ. Đây là một chỉ thị được sử dụng để 'phơi bày' các biến, mixins và hàm đã được định nghĩa trong các tệp khác. Thay vì sử dụng riêng lẻ, nó đóng vai trò là điểm truy cập xác định, 'Hãy sử dụng module này từ đây.'.

1@forward "variables";

• Đoạn mã này có nghĩa là 'làm cho nội dung trong variables.scss có thể được sử dụng từ các file khác.'.

Sự khác biệt giữa @use và @forward

@use và @forward đều là cú pháp để xử lý module, nhưng mục đích của chúng hoàn toàn khác nhau. @use là chỉ thị để sử dụng các thành phần trong file, còn @forward là chỉ thị để các thành phần đó có thể được sử dụng bởi các file khác.

1// @use: import the module for use in this file
2@use "variables";
3
4// @forward: re-export the module for other files to consume
5@forward "variables";

• @use thể hiện sự phụ thuộc cần thiết cho triển khai của file hiện tại, trong khi đó @forward biến file thành một điểm truy cập API công khai. Hiểu sự khác biệt này sẽ giúp bạn quyết định khi nào nên sử dụng @forward.

Tại sao cần @forward?

Khi bạn thêm nhiều file Sass hơn, bạn có thể phải viết rất nhiều câu lệnh @use. Bằng cách sử dụng @forward, bạn có thể tập trung mọi thứ vào một file đầu vào duy nhất.

1styles/
2├─ foundation/
3│  ├─ _variables.scss
4│  ├─ _mixins.scss
5│  └─ _index.scss
6└─ main.scss

• Trong cấu trúc này, _index.scss đóng vai trò là 'API công khai.'.

Cách sử dụng cơ bản của @forward

Hãy cùng xem cách sử dụng cơ bản của @forward.

1// _variables.scss
2// Color definitions used across the project
3
4$primary-color: #006ab1;
5$secondary-color: #e0f0ff;
6
7// Internal use only (will be hidden via @forward hide)
8$debug-color: magenta;

• Thay vì trực tiếp dùng @use cho biến này, bạn nhóm chúng lại bằng @forward.

1// _index.scss
2@forward "variables";

• Ở thời điểm này, _index.scss không chứa gì; đó chỉ là một file trung gian.

Sử dụng các module đã được @forward

Thay vì trực tiếp dùng @use trên từng file riêng lẻ, bạn chỉ cần @use file index đã nhóm các lệnh @forward ở phía sử dụng. Điều này cho phép bạn sử dụng nó như một giao diện ổn định mà không cần quan tâm đến cấu trúc bên trong.

1// main.scss
2// Import the public API of the foundation layer
3@use "foundation";
4
5.button {
6  background-color: foundation.$primary-color;
7}

• Với thiết kế này, ngay cả khi vị trí định nghĩa của các biến hoặc mixin thay đổi, bạn có thể thay đổi cấu trúc bên trong mà không cần chỉnh sửa mã phía sử dụng.

Kết hợp nhiều module bằng @forward

Trong phát triển thực tế, việc chia nhỏ các biến, mixins và hàm theo vai trò của chúng là điều phổ biến. @forward có thể được viết nhiều lần, cho phép bạn gộp các module riêng biệt thành một API công khai duy nhất.

Dưới đây, chúng tôi cung cấp các ví dụ về mixin và hàm, đồng thời trình bày một thiết kế cho phép phơi bày chúng ra ngoài dưới dạng một giao diện duy nhất.

 1// _mixins.scss
 2// Reusable mixins for layout and components
 3
 4// Reset default button styles
 5@mixin button-reset {
 6  appearance: none;
 7  background: none;
 8  border: none;
 9  padding: 0;
10  margin: 0;
11  font: inherit;
12  color: inherit;
13}
14
15// Clearfix utility
16@mixin clearfix {
17  &::after {
18    content: "";
19    display: table;
20    clear: both;
21  }
22}
23
24// Internal mixin (not intended to be part of the public API)
25@mixin debug-outline {
26  outline: 2px dashed red;
27}

 1// _functions.scss
 2// Utility functions for consistent styling
 3
 4@use "sass:math";
 5
 6// Convert px to rem based on a 16px root size
 7@function rem($px) {
 8  @return math.div($px, 16) * 1rem;
 9}
10
11// Clamp a value between a minimum and maximum
12@function clamp-value($value, $min, $max) {
13  @return math.max($min, math.min($value, $max));
14}

1// _index.scss
2// Re-export variables, mixins, and functions as a single public API
3@forward "variables";
4@forward "mixins";
5@forward "functions";

• Bằng cách chỉ xuất bản file index này ra bên ngoài, bạn có thể ẩn đi cấu trúc bên trong và cung cấp một giao diện thân thiện cho người dùng.

Ngăn ngừa xung đột tên (as)

Nếu cùng một tên biến hoặc mixin được định nghĩa ở nhiều module, bạn có thể chỉ định as trong @forward để thêm tiền tố khi xuất ra ngăn ngừa xung đột tên gọi.

1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;

Với mã này, $primary-color trong variables sẽ được xuất ra với tên sau:.

1// foundation.$var-primary-color

• Cách này là một phương pháp xác định rõ ràng các quy tắc thiết kế và mở rộng một cách an toàn, và đây là một kỹ thuật không thể thiếu, đặc biệt trong các dự án lớn hoặc thư viện chia sẻ.

Ẩn các thành phần không cần thiết (hide)

Các module có thể chứa biến hoặc mixin chỉ phục vụ mục đích triển khai nội bộ. Bằng cách sử dụng hide, bạn có thể loại trừ chúng khi tái xuất và ngăn không cho bên ngoài truy cập.

1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;

Với cấu hình này, $debug-color chỉ dùng được trong nội bộ module, giúp tránh bị sử dụng không chủ ý từ phía người dùng.

Chỉ định thành phần xuất ra (show)

Nếu bạn chỉ muốn xuất ra một số mixin hoặc function cụ thể, hãy dùng show. Bằng cách giới hạn những gì được phơi bày, bạn có thể làm rõ mục đích của module và ý định thiết kế của nó.

1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;

• Khi sử dụng show như vậy, bạn sẽ thấy rõ ngay những API nào được phép sử dụng chính thức.

@forward không thể sử dụng một mình

Một điểm quan trọng là các biến đã được @forward không thể sử dụng trong chính file đó.

1@forward "variables";
2
3.test {
4  color: $primary-color; // Error
5}

• @forward chỉ dùng để 'tái xuất', còn 'sử dụng' là vai trò của @use.

Ví dụ về việc phân định vai trò hợp lý

Trong thiết kế module bằng Sass, lý tưởng là phải phân tách rõ lớp công khai (API) và lớp triển khai. @forward định nghĩa API công khai, còn @use sẽ dùng nó ở phía triển khai.

1// _index.scss (public API)
2@forward "variables";
3@forward "mixins";

1// _component.scss
2// Consume the public API of the foundation layer
3@use "foundation";
4
5.card {
6  color: foundation.$primary-color;
7}

• Với cấu trúc này, bạn sẽ dễ dàng phân biệt đâu là giao diện công khai và đâu là phần triển khai nội bộ, từ đó giúp thiết kế minh bạch hơn.

Sự khác biệt rõ rệt so với @import

@import mở rộng toàn bộ định nghĩa đã nhập vào phạm vi toàn cục. Trong khi đó, @use và @forward tường minh xuất các thành phần và truy cập thông qua namespace.

 1// @import (deprecated)
 2// Everything is injected into the global scope
 3$color: red;
 4
 5.button-import {
 6  color: $color;
 7}
 8
 9// @use + @forward (recommended)
10// Access values explicitly through a namespace
11@use "foundation";
12
13.button-use {
14  color: foundation.$primary-color;
15}

• Vì sự khác biệt này, bạn có thể nâng cao khả năng bảo trì và an toàn bằng cách ngăn chặn việc ghi đè ngoài ý muốn và nhầm lẫn về phụ thuộc.

Tóm tắt

@forward là tính năng quan trọng hỗ trợ thiết kế dễ bảo trì. Khi chú ý đến 'cái gì nên xuất ra, cái gì nên giữ lại làm triển khai nội bộ', cấu trúc style của bạn sẽ an toàn hơn và dễ đọc hơn. Bằng cách sử dụng đúng @use và @forward, bạn có thể làm rõ các phụ thuộc và đạt được thiết kế chắc chắn trước mọi thay đổi.

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