Tìm hiểu về 7-1 pattern khi dùng Sass

Pattern 7-1 (hay còn gọi là Sass 7-1 Architecture hoặc 7-1 Pattern) là một kiến trúc tổ chức file Sass phổ biến, giúp quản lý, bảo trì và mở rộng mã CSS một cách dễ dàng, đặc biệt khi làm việc với dự án lớn.

Mục lục Hiển thị

1. Giải thích nhanh 7-1 pattern:

  • “7” là số thư mục con bên trong thư mục sass/ (hoặc scss/)
  • “1” là một file main.scss (hoặc style.scss) duy nhất, nơi tổng hợp (import) tất cả các file Sass con lại.

2. Cấu trúc thư mục chuẩn của 7-1 pattern

Thư mục demo qua sơ đồ code:

sass/
├── abstracts/       // Biến, mixin, function, placeholder
├── base/            // Reset, typography, HTML tag mặc định
├── components/      // Button, card, modal, form,...
├── layout/          // Header, footer, sidebar, grid,...
├── pages/           // Style riêng từng trang (home, about,...)
├── themes/          // Chủ đề giao diện (dark/light theme,...)
├── vendors/         // Thư viện bên thứ 3 (Bootstrap, Normalize.css,...)
└── main.scss        // File chính import các file trên

Demo qua hình ảnh:

7-1 pattern khi dùng Sass

Mô tả chi tiết từng thư mục:

Thư mụcNội dung
abstracts/Các biến (_variables.scss), mixin, function, placeholder.
base/Style gốc, ví dụ: reset, normalize, default typography.
components/Các thành phần UI nhỏ: button, card, form, tab, modal,…
layout/Các phần bố cục chính: header, footer, sidebar, grid system,…
pages/Style riêng cho từng trang (nếu khác biệt rõ).
themes/Màu chủ đề, light/dark, theme switcher.
vendors/CSS của thư viện ngoài (nếu dùng).
main.scssImport tất cả các file bên trên, chỉ file này được compile ra CSS.

Ví dụ trong main.scss:

// 1. Abstracts
@use 'abstracts/variables';
@use 'abstracts/mixins';

// 2. Base
@use 'base/reset';
@use 'base/typography';

// 3. Layout
@use 'layout/header';
@use 'layout/footer';

// 4. Components
@use 'components/button';
@use 'components/card';

// 5. Pages
@use 'pages/home';
@use 'pages/about';

// 6. Themes
@use 'themes/light';
@use 'themes/dark';

// 7. Vendors
@use 'vendors/bootstrap';

Chỉ file main.scss được build ra CSS cuối cùng (VD: dùng sass main.scss main.css), các file còn lại chỉ là module.

3. Lợi ích của 7-1 Pattern

  • Dễ mở rộng cho nhóm nhiều dev cùng làm việc.
  • Rõ ràng, dễ quản lý khi dự án lớn.
  • Tái sử dụng cao, tách biệt giữa cấu trúc, component và theme.
  • Tận dụng tốt nguyên lý Separation of Concerns (tách biệt trách nhiệm) trong phát triển web.