Cách sử dụng Sass trong React
Sass (các biểu định kiểu tuyệt vời về mặt cú pháp) là một phần mở rộng của CSS với các tính năng bổ sung giúp nó trở nên mạnh mẽ hơn. Điều tốt nhất về Sass là khả năng tương thích với CSS, có nghĩa là bạn có thể sử dụng nó trong các dự án phát triển web của mình với các khung JavaScript như React.
Tuy nhiên, không giống như vanilla CSS, bạn cần thiết lập một chút để sử dụng Sass. Tìm hiểu cách thức hoạt động của tính năng này bằng cách thiết lập một dự án React.js đơn giản và tích hợp Sass với dự án đó.
Mục Lục
Cách sử dụng Sass trong Dự án React.js của bạn
Giống như các bộ xử lý CSS khác, Sass không được hỗ trợ bởi React. Để sử dụng Sass trong React, bạn cần cài đặt phần phụ thuộc của bên thứ ba thông qua trình quản lý gói như yarn hoặc npm.
Bạn có thể kiểm tra xem npm hoặc yarn có được cài đặt trên máy cục bộ của mình hay không bằng cách chạy npm –version hoặc sợi –version. Nếu bạn không thấy số phiên bản trong thiết bị đầu cuối của mình, trước tiên hãy cài đặt npm hoặc yarn.
Tạo Dự án React.js
Để làm theo hướng dẫn này, bạn có thể thiết lập một ứng dụng React.js đơn giản bằng ứng dụng tạo-phản ứng.
Đầu tiên, sử dụng dòng lệnh để điều hướng đến thư mục bạn muốn tạo dự án React của mình. Sau đó chạy ứng dụng tạo phản ứng npx
import React from "react";
import "./App.scss";
function App() {
return (
<div className="wrapper">
<h1>Using Sass in React</h1>
<header className="wrapper__btns">
<button>Blue Button</button>
<button>Red Button</button>
<button>Green Button</button>
</header>
</div> );
}
export default App;
Khi bạn đã thiết lập một dự án React cơ bản, đã đến lúc tích hợp Sass.
Cài đặt Sass
Bạn có thể cài đặt Sass qua npm hoặc yarn. Cài đặt nó qua sợi bằng cách chạy sợi thêm sass hoặc, nếu bạn thích npm, hãy chạy npm cài đặt sass. Trình quản lý gói của bạn sẽ thêm phiên bản mới nhất của Sass vào danh sách phụ thuộc trong dự án gói.json tập tin.
Đổi tên tệp .css thành .scss hoặc .sass
Trong thư mục của dự án, đổi tên App.css và index.css thành App.scss và index.scss tương ứng.
Sau khi đổi tên các tệp đó, bạn cần cập nhật các mục nhập trong tệp App.js và index.js của mình để khớp với các phần mở rộng tệp mới như sau:
import "./index.scss";
import "./App.scss";
Từ thời điểm này trở đi, bạn nên sử dụng phần mở rộng .scss cho bất kỳ tệp kiểu nào mà bạn tạo.
Nhập và sử dụng biến và mixin
Một trong những lợi thế đáng kể nhất của Sass là nó giúp bạn viết các kiểu rõ ràng, có thể tái sử dụng bằng cách sử dụng các biến và mixin. Mặc dù có thể không rõ ràng về cách bạn có thể làm điều tương tự trong React, nhưng nó không quá khác biệt so với việc sử dụng Sass trong các dự án được viết bằng JavaScript và HTML thuần túy.
Đầu tiên, tạo một cái mới phong cách thư mục trong của bạn src thư mục. Trong thư mục Kiểu, tạo hai tệp: _variables.scss và _mixins.scss. Thêm các quy tắc sau vào _variables.scss:
$background-color:
$text-color:
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px;
Và thêm phần sau vào _mixins.scss:
@mixin vertical-list {
display: flex;
align-items: center;
flex-direction: column;
}
Sau đó, nhập các biến và mixin trong App.scss như sau:
@import "./Styles/variables";
@import "./Styles/mixins";
Sử dụng các biến và mixin của bạn trong tệp App.scss:
@import "./Styles/variables.scss";
@import "./Styles/mixins";
.wrapper {
background-color: $background-color;
color: $text-color;
padding: $block-padding;
&__btns {
@include vertical-list;
button {
width: $btn-width;
height: $btn-height;
}
}
}
Đó là cách bạn sử dụng các biến và mixin trong React. Bên cạnh mixin và biến, bạn cũng có thể sử dụng tất cả các tính năng tuyệt vời khác trong Sass, chẳng hạn như hàm. Không có giới hạn.
Sử dụng Sass trong React.js
Sass cung cấp nhiều chức năng hơn trên CSS, đây chính xác là những gì bạn cần để viết mã CSS có thể tái sử dụng.
Bạn có thể bắt đầu sử dụng Sass trong React bằng cách cài đặt gói sass qua npm hoặc yarn, cập nhật các tệp CSS của bạn thành .scss hoặc .sass, sau đó cập nhật quá trình nhập của bạn để sử dụng phần mở rộng tệp mới. Sau đó, bạn có thể bắt đầu viết SCSS trong React.