Tạo kiểu phản ứng bằng Sass
Sass là gì
Sass là một trình xử lý trước CSS.
Các tệp Sass được thực thi trên máy chủ và gửi CSS đến trình duyệt.
Bạn có thể tìm hiểu thêm về Sass trong Hướng dẫn về Sass của chúng tôi .
Tôi có thể sử dụng Sass không?
Nếu bạn sử dụng nó create-react-apptrong 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 thiết bị đầu cuối 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 tệp 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 các tệp Sass, bạn có thể sử dụng các biến và các hàm Sass khác:
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:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));