Áp dụng Sass trong dự án React thực tế

Như chúng ta đều biết, để xây dựng nên giao diện một trang web, CSS (Cascading Style Sheets) là thành phần cơ bản không thể thiếu. Tuy nhiên khi trang web trở nên phức tạp với nhiều thành phần giao diện, việc viết CSS đơn thuần sẽ khiến code trở nên phức tạp, khó đọc và khó bảo trì. SASS được sinh ra giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn.

I. SASS là gì?

SASS (Syntactically Awesome StyleSheets) là một CSS Preprocessor (ngôn ngữ tiền xử lý CSS - giúp bạn viết một cú pháp CSS gần như một ngôn ngữ lập trình rồi compile ra CSS thuần).

SASS giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, các class dùng chung hay có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.

II. SASS và SCSS

SASS có 2 cú pháp khác nhau đó là SASS và SCSS.

SASS được thiết kế và viết bởi các lập trình viên Ruby, sử dụng cú pháp giống Ruby - không có các dấu ngoặc nhọn {}, dấu chấm phẩy, cấu trúc không gần với CSS. Ví dụ như sau:

$font-default: Sans-serif
$primary-color: #FFFFFF

body
  font: 100% $font-default
  color: $primary-color

Tháng 5/2010, một cú pháp mới được giới thiệu gọi là SCSS. Cú pháp ra đời giúp chúng ta viết sass như viết css. Phần code phía trên sẽ được viết lại như sau:

$font-default: Sans-serif;
$primary-color: #333;

body {
  font: 100% $font-default;
  color: $primary-color;
}

Vì vậy, cú pháp SCSS được sử dụng phổ biến thay cho cú pháp SASS.

III. Đặc trưng của Sass

• Biến và hàm

Sass giúp tạo ra các biến và hàm để tái sử dụng trong các file khác. Giúp việc viết sass dễ hiểu, dễ đọc và bảo trì, đồng thời cũng khiến cho chúng trông giống với code mà lập trình viên thường viết

• Tính toán

Sass có công cụ giúp chúng ta tính toán, lại một lần nữa khiến chúng ta có cảm giác như đang làm việc với 1 ngôn ngữ lập trình

• Kế thừa

Định nghĩa ra 1 class, rồi những tag nào cần sử dụng thì sẽ kế thừa bằng cú pháp @extend

• Quy tắc xếp chồng (Nested Rules)

Đây là đặc trưng giúp chúng ta tổ chức và cấu trúc file sass một cách rõ ràng, rành mạch, dễ hiểu. Chi tiết sẽ được đề cập ở phần bên dưới

IV. Cài đặt Sass và node-sass

• Đầu tiên, khi muốn sử dụng Sass, chúng ta cần cài đặt nó vào project. Cách cài đặt có thể xem tại đây:

https://sass-lang.com/install

File Sass không được hiểu bởi trình duyệt, vì vậy ta cần phải biên dịch sang CSS trước khi đặt vào web. Đó là lý do tại sao bạn cần một số công cụ để giúp bạn biên dịch .scss thành .css.

• Node-sass là thư viện thường được dùng để compile code sass thành css một cách tiện lợi trong project.

Cách cài đặt node-sass có thể xem tại đây:

https://www.npmjs.com/package/node-sass

V. Cấu trúc thư mục trong dự án thực tế

Dưới đây là một ví dụ về cấu trúc thự mục sass trong dự án thực tế:

sass
|– base/ 
|     |– _all.scss 
|     |– _mixins.scss 
|     |– _reset.scss
|     |– _variables.scss
|     
|– layout/ 
|     |– _all.scss 
|     |– _header.scss 
|     |– _footer.scss  
| 
|– modules/
|     |– _all.scss 
|     |– _button.scss 
|     |– _card.scss  
| 
|– pages/ 
|     |– _all.scss 
|     |– _home.scss 
|     |– _about.scss  
|     |– _contact.scss 
|     |– _admin.scss 
|
|– state/ 
|     |– _all.scss 
|     |– _text.scss 
|     |– _space.scss 
|
 main.scss 

Thư mục sass: Thư mục chứa toàn bộ code sass.

Có 2 file đặc biệt cần chú ý đó là:

_all.scss: file này có nhiệm vụ tổng hợp lại các file khác trong thư mục. Ví dụ:

@import 'reset';
@import 'variables';
@import 'mixins';
@import 'base';

main.scss: đây sẽ là file tổng hợp lại các file _all.scss, đồng nghĩa với việc gom lại tất cả code trong thư mục sass để biên dịch sang css. Ví dụ:

@import 'base/all';
@import 'modules/all';
@import 'layout/all';
@import 'state/all';
@import 'pages/all';

Với cách sử dụng 2 file này. chúng ta có thể lồng các file sass lại và quản lý chúng 1 cách khoa học. Chú ý rằng cách viết _tên-file đã được quy định và chúng ta cần tuân theo. Tiếp theo chúng ta sẽ phân tích kĩ hơn những file nhỏ bên trong các thư mục con:

• Thư mục con base: Chứa những file scss cho những nội dung chung của cả trang web
  • _mixins.scss: chứa khai báo những hàm dùng chung trong cả project
  • _reset.scss: khai báo lại những thuộc tính chung
  • _variables.scss: khai báo những biến dùng trong project. Ví dụ: màu sắc, kích thước,...
• Thư mục con layout: Chứa những file scss cho layout của trang web
  • _header.scss: chứa khai báo style cho thẻ header
  • _footer.scss: chứa khai báo style cho thẻ footer
• Thư mục con modules: Chứa style những thành phần nhỏ, có thể tái sử dụng của trang web
  • _button.scss: chứa khai báo style cho thành phần button
  • _checkbox.scss: chứa khai báo style cho thành phần checkbox
• Thư mục con state: Chứa style của trạng thái của những phần tử nhỏ như text, space,...
  • _text.scss: chứa khai báo style cho chữ một cách chi tiết
  • _space.scss: chứa khai báo style cho khoảng cách giữa các phần tử

Kết luận: Phía trên chỉ là ví dụ về 1 cách phân chia thư mục sass trong dự án. Bạn có thể tham khảo để áp dụng vào dự án của mình. Bạn có thể tìm hiểu kĩ hơn về sass tại trang chủ https://sass-lang.com/guide

Chúc bạn thành công!