Tạo kiểu React bằng Sass
Sass là gì
Sass là một bộ tiền xử lý CSS.
Các tệp Sass được thực thi trên máy chủ và gửi CSS tới trình duyệt.
Bạn có thể tìm hiểu thêm về Sass trong Hướng dẫn Sass của chúng tôi.
Tôi có thể sử dụng Sass không?
Nếu bạn sử dụng create-react-app
trong dự án của mình, bạn có thể dễ dàng cài đặt và sử dụng Sass trong các dự án React của mình.
Cài đặt Sass bằng cách chạy lệnh này trong terminal của bạn:
npm i sass
Bây giờ bạn đã sẵn sàng đưa các tệp Sass vào dự án của mình!
Tạo một tập tin Sass
Tạo tệp Sass giống như cách bạn tạo tệp CSS, nhưng tệp Sass có phần mở rộng tệp .scss
Trong tệp Sass, bạn có thể sử dụng các biến và các hàm Sass khác:
Ví dụ
my-sass.scss:
Tạo một biến để xác định màu của văn bản:
$myColor: red; h1 { color: $myColor; }
Nhập tệp Sass giống như cách bạn nhập tệp CSS:
Ví dụ
chỉ mục.js:
import React from 'react'; import ReactDOM from 'react-dom/client'; import './my-sass.scss'; const Header = () => { return ( <> <h1>Hello Style!</h1> <p>Add a little style!.</p> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);