Styling React Using Sass

Sass là cái gì?

Sass là một tiền xử lý của CSS.

Các tập tin Sass được thực thi trên server và gửi CSS đến trình duyệt.

Bạn có thể tìm hiểu thêm về Sass trong Tutorial của chúng tôi.

Tôi có thể sử dụng Sass không?

Nếu như chúng ta sử dụng create-react-app trong dự án, chúng ta có thể dễ dàng cài đặt và sử dụng Sass trong các dự án React.

Chúng ta có thể cài đặt Sass bằng cách chạy dòng lệnh sau trong terminal:

Bây giờ chúng ta đã sẵn sàng để include các tập tin Sass trong dự án của mình!

Tạo ra một tập tin Sass

Cách tạo ra một tập tin Sass giống như cách chúng ta tạo ra một tập tin CSS, nhưng tập tin Sass có phần mở rộng là *.scss

Trong các tập tin Sass chúng ta có thể sử dụng biến và function:

Ví dụ trong tập tin my-sass.scss chúng ta tạo ra một biến để định nghĩa màu sắc của đoạn văn bản:

Cách import tập tin Sass giống như cách chúng ta import một tập tin CSS:

index.js: