Articles
Giới thiệu về SASS/SCSS
Các mô-đun SASS

Các mô-đun SASS

Bài viết này giải thích về các mô-đun SASS.

Chúng tôi giải thích cách chia nhỏ SASS bằng cách sử dụng @use và @forward, cũng như cách tái sử dụng biến, mixin, hàm, cài đặt giao diện và API công khai.

YouTube Video

Các mô-đun SASS

Hệ thống mô-đun của SASS giúp phạm vi hóa rõ ràng các kiểu và cung cấp thiết kế dễ tái sử dụng, dễ bảo trì.

Khái niệm Cơ bản về Module

Các mô-đun SASS giải quyết vấn đề ô nhiễm không gian tên toàn cục và sự phụ thuộc không rõ ràng tồn tại ở phương pháp @import cũ. Mỗi file được tải như một module với namespace riêng, và chỉ những mục xuất ra rõ ràng mới truy cập được từ các file khác.

Ví dụ về Cấu trúc File

Đầu tiên, đây là ví dụ về cấu trúc dự án thực tế. Dưới đây là ví dụ về hệ thống thiết kế nhỏ.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss
  • Cấu trúc này giúp việc mô-đun hóa, kiểm thử và thay thế các phần trở nên dễ dàng.
  • Các file partial có dấu gạch dưới ở đầu tên file.

Cơ bản về @use

@use tải một module và cung cấp namespace. Điều này ngăn chặn trùng tên và làm rõ nguồn của module.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;
  • File này đơn giản chỉ định nghĩa biến. Các biến xuất từ module có thể được tham chiếu trực tiếp bằng @use.
1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}
  • Ở đây, module variables được tham chiếu với namespace variables.. Cách làm này giúp xác định rõ nguồn gốc của từng mục.

Rút gọn hoặc Đặt bí danh cho Namespace

Sử dụng as giúp bạn rút ngắn namespace.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}
  • Đây là ví dụ nhập variables với bí danh ngắn hơn vars. Chọn tên dựa trên việc ưu tiên tính dễ đọc hay dễ gõ.

Định nghĩa Mixin

Mixin và function cũng có thể được định nghĩa và sử dụng trong các module. Giữ chú thích nhất quán theo quy tắc dự án giúp mã rõ ràng hơn.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}
  • File này định nghĩa một mixin cho container. Nó nhận các tham số và cung cấp giá trị mặc định.
1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}
  • Đây là ví dụ sử dụng mixin với @include.

Định nghĩa Hàm

Các hàm được dùng để trả về giá trị và có thể được định nghĩa, tái sử dụng trong mô-đun. Bằng cách đóng gói các phép tính giá trị thiết kế trong các hàm, kiểu dáng sẽ ổn định và dễ bảo trì hơn.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}
  • Tệp này định nghĩa một hàm chuyển đổi giá trị pixel sang rem. Một giá trị gốc mặc định cũng được chỉ định.
1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}
  • Dưới đây là ví dụ về việc gọi một hàm thông qua @use và áp dụng kết quả đó vào một kiểu dáng.

Xuất Module và @forward (Thiết kế API)

Khi muốn xuất nhiều file nội bộ ra ngoài, bạn có thể dùng @forward để tạo 'public API'.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';
  • Nhiều file nội bộ có thể được nhóm như một điểm nhập, từ đó xuất ra public API. Điều này giúp người dùng truy cập toàn bộ tính năng cần thiết chỉ bằng một điểm nhập.
1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}
  • Nội dung của variables và mixins được truy cập cùng qua index. @forward biến index thành lớp public.

Kiểm soát API với tùy chọn show / hide của @forward

Nếu chỉ muốn xuất biến cụ thể, hãy dùng tùy chọn show hoặc hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;
  • Thêm !default cho phép xuất giá trị có thể được ghi đè.
1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';
  • Dùng show với @forward, bạn có thể giới hạn API chỉ xuất các phần cần thiết. Biến và function dùng nội bộ sẽ không nhìn thấy được từ bên ngoài.

Giúp Module Có thể Cấu hình (bằng with)

Nếu dùng !default trong module, giá trị có thể được ghi đè bằng with tại nơi import.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}
  • Module với giá trị mặc định bằng !default có thể nhận cấu hình bằng with.
1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}
  • with trong @use cho phép ghi đè biến mặc định khi import module. Điều này hữu ích cho việc chuyển đổi chủ đề.
  • Lưu ý with chỉ có tác dụng khi import, không thể thay đổi giá trị sau đó.

Ví dụ Thực tiễn: Thành phần Button (Ví dụ Hoàn chỉnh)

Hãy thử thiết kế style cho button bằng cách dùng module. Đầu tiên, tách biến và mixin thành các module riêng.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;
  • Biến mặc định cho button được định nghĩa ở đây. Dùng !default cho phép người dùng ghi đè các giá trị này.
 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}
  • Mixin cơ bản cho button được định nghĩa ở đây. Chúng được tách riêng để dễ tái sử dụng.
 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}
  • Style của button được tạo bằng tham chiếu namespace với @use. Một biến thể được định nghĩa là .button--large.
1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins
  • Chỉ cần import module button bạn có thể sử dụng style của button ngay.

Chuyển đổi Chủ đề (Dùng nhiều File Chủ đề)

Chuyển đổi chủ đề có thể thực hiện qua cấu hình bằng with hoặc tạo nhiều module và thay module sử dụng với @use.

1// themes/_light.scss
2$brand-color: #0a74da !default;
1// themes/_dark.scss
2$brand-color: #111827 !default;
  • Định nghĩa màu thương hiệu và các thiết lập khác trong nhiều file chủ đề và chuyển đổi chúng khi build hoặc import.
1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';
  • Chọn chủ đề bằng cách dùng with hoặc import như @use 'themes/light' khi build.

Riêng tư và Công khai (Tiền tố _ và !default)

Trong SASS, thêm dấu gạch dưới vào đầu tên tệp sẽ đánh dấu nó là một phần tách (partial). Tuy nhiên, để kiểm soát xuất module, hãy dùng show và hide với @forward để quyết định nội dung xuất ra.

Bạn có thể dùng @forward để tổ chức public API và ẩn phần cài đặt nội bộ khỏi bên ngoài.

Thực tiễn Tốt nhất khi sử dụng

Dưới đây là một số khái niệm cơ bản hữu ích khi sử dụng SASS trong thực tế. Những hướng dẫn trên giúp giảm nhầm lẫn khi phát triển và giữ mã nguồn được tổ chức.

  • Nếu biến có khả năng thay đổi theo chủ đề, hãy thêm !default. Điều này giúp người dùng dễ dàng ghi đè các giá trị hơn.
  • Module nên được chia theo chức năng và tập trung vào một mục đích duy nhất. Việc quản lý trở nên dễ dàng hơn khi tách biệt biến, mixin và các thành phần.
  • Quản lý nội dung public bằng @forward, dùng show hoặc hide khi cần thiết. Xác định rõ phạm vi public giúp thiết kế an toàn hơn.
  • Sử dụng namespace để phân biệt rõ function thuộc module nào. Điều này tránh nhầm lẫn với các đoạn mã khác.
  • Hãy nhớ rằng with chỉ hoạt động khi thực hiện @use. Vì không thể thay đổi sau, hãy cấu hình ngay khi import.
  • Dùng dấu gạch dưới ở đầu tên file để biến thành partial, khiến chúng không bị biên dịch riêng lẻ. Việc này giúp kết hợp nhiều file thành một cấu trúc lớn dễ dàng hơn.
  • Đưa ví dụ sử dụng vào module index giúp kiểm thử và tài liệu hóa. Người dùng sẽ dễ hiểu cách hoạt động hơn.

Ghi nhớ các điểm này sẽ giúp bạn quản lý dự án lớn và giữ mã dễ đọc khi làm việc nhóm.

Tóm tắt

Hệ thống mô-đun SASS tổ chức mã kiểu dáng thông qua các không gian tên, API công khai và cấu hình đơn giản hóa. Sử dụng thành thạo @use và @forward giúp phát triển nhóm, chuyển đổi chủ đề và thiết kế thư viện dễ dàng hơn nhiều.

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

Kế thừa trong SASS