Cách dùng Sass trong React

Sass là một phiên bản cải tiến của CSS mà bạn có thể dùng trong các dự án React ngay từ bây giờ. Dưới đây là hướng dẫn cách dùng Sass trong React.

Sass (syntactically awesome style sheets) là extension của CSS chứa các tính năng bổ sung khiến nó trở nên mạnh mẽ hơn. Điều tuyệt nhất về Sass là khả năng tương thích của nó với CSS. Điều đó có nghĩa bạn có thể dùng Sass trong những dự án phát triển web với framework JavaScript như React.

Tuy nhiên, khác vanilla CSS, bạn cần thiết lập một chút để dùng Sass. Hãy cùng nhau tìm hiểu cách nó hoạt động bằng việc thiết lập một dự án React.js đơn giản và tích hợp Sass bên trong.

Cách dùng Sass trong dự án React.js

Giống như những trình xử lý CSS khác, Sass không được hỗ trợ bởi React. Để dùng Sass trong React, bạn cần cài phần phụ thuộc bên thứ ba qua trình quản lý gói như yarn hoặc npm.

Bạn có thể kiểm tra npm hay yarn được cài đặt trên máy cục bộ bằng cách chạy npm --version hoặc yarn --version. Nếu không thấy số phiên bản trong terminal, cài npm hoặc yarn trước.

Tạo dự án React.js

Để làm theo hướng dẫn này, bạn có thể thiết lập app React.js đơn giản bằng app create-react-app.

Đầu tiên, dùng lệnh này để điều hướng tới thư mục bạn muốn tạo dự án React. Sau đó, chạy npx create-react-app <appname>. Quá trình này có thể mất một lúc. Sau khi nó hoàn tất, nhập thư mục ứng dụng bằng cd <appname>. Thêm nội dung sau vào file App.js để bắt đầu:

import React from "react"; 
import "./App.css"; 
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;

Sau khi thiết lập dự án React cơ bản, giờ là lúc tích hợp Sass.

Cài đặt Sass

Bạn có thể cài Sass qua npm hoặc yarn. Cài đặt nó qua yarn bằng cách chạy yarn add sass hoặc, nếu thích npm, chạy npm install 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ần phụ thuộc trong file package.json của dự án.

Đổi lại tên file .css sang .scss hoặc .sass

Trong thư mục dự án, đổi lại tên App.css và index.css lần lượt thành App.scss và index.scss.

Sau khi đã đổi lại tên những file này, bạn cần update các import trong file App.js và index.js để khớp các phần mở rộng file như sau:

import "./index.scss";
import "./App.scss";

Từ thời điểm này trở đi, bạn nên dùng extension .scss cho bất kỳ kiểu file bạn tạo.

Nhập và dùng biến và kết hợp

Một trong số ưu điểm nổi bật nhất của Sass là giúp viết các kiểu code gọn gàng, có thể tái sử dụng bằng biến và mixin. Dù không rõ ràng về cách bạn có thể làm điều tương tự trong React, nhưng không có quá nhiều sự khác biệt với việc dùng Sass trong dự án được viết bằng JavaScript & HTML đơn giản.

Đầu tiên, tạo thư mục Styles mới trong thư mục src. Trong thư mục Styles, tạo hai file: _variables.scss và _mixins.scss. Thêm quy tắc sau vào _variables.scss:

$background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px;

Thêm code 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";

Dùng các biến và mixin trong file 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;
    }
   }
}

Đây là cách dùng biến và mixin trong React. Bên cạnh mixin và biến, bạn cũng có thể dùng tất cả tính năng tuyệt vời khác trong Sass, như các hàm. Không có giới hạn miễn là bạn thiết lập scss trong dự án React.

Giờ bạn có thể dùng Sass trong React bằng cách cài đặt gói sass qua npm hoặc yarn theo hướng dẫn trên. Hi vọng bài viết hữu ích với các bạn.