- vừa được xem lúc

Sử dụng SASS với create-react-app

0 0 34

Người đăng: Nguyen The Vinh Bao

Theo Viblo Asia

Chào các bạn,

SASS : 1 trong những CSS preprocessor rất phổ biến được nhiều developer sử dụng để viết CSS hiệu quả hơn và modular hơn với hàng loạt tính năng như nesting, variables, mixins, extends,...

create-react-app : 1 bộ react boilerplate và CLI được phát triển bởi chính cha đẻ của react - Facebook. Chỉ với 1 dòng command line đơn giản, bạn đã setup xong 1 react project được configured kĩ càng, support hầu hết các technologies cần thiết để bạn tập trung vào việc phát triển ứng dụng thay vì loay hoay với đống configs, setup.

Vậy tại sao chúng ta không sử dụng SASS cho styling kết hợp với React cho business logics?

Let's do that 😎

1. Setup SASS với create-react-app

Sau khi các bạn setup xong ứng dụng bằng create-react-app , chúng ta cần cài node-sass package - là 1 npm package giúp chúng ta compile sass sang css.

 create-react-app new-app cd new-app npm install node-sass --save 

Create React App 2 đã chính thức support SASS nên chúng ta không cần phải thay đổi thêm bất kì config gì nữa, hooray 🎉

2. Style React Component với SASS

Setup xong rồi, thử nó thôi. Ví dụ chúng ta có 1 component Menu để hiển thị danh sách các links của ứng dụng :

//-App.js import React, { Component } from 'react';
import Menu from './Menu'; const MENUS= [ { text: 'Website', url: 'http://thebaodev.me' }, { text: 'Blog', url: 'http://blog.thebaodev.me' },
]; class App extends Component { render() { return ( <div> <Menu menus={MENUS} /> </div> ); }
}
export default App;

Menu component, nó sẽ nhận vào list menus và render với <a> tag.

//-Menu.js
import React from 'react';
import './Menu.scss';
const Menu = ({ menus }) => ( <div className="Menu"> <ul> {menus.map(menu => ( <li key={menu.url}> <a href={menu.url}>{link.text}</a> </li> ))} </ul> </div>
);
export default Menu;

Có thể thấy, Menu component còn import thêm 1 file scss Menu.scss được sử dụng để styling.

Chú ý: Để tránh xảy ra các vấn đề về css overrides, cascade chúng ta nên có 1 class để wrap ( bao bọc ) hết component và style từng thành phần bên trong. ( xem ví dụ bên dưới để hiểu rõ hơn )

# Menu.scss .Menu {
# Menu selector bao bọc các element con # để tránh gây xung đột css với component khác. background-color: bisque; ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; } li { margin: 10px 20px; } a { text-decoration: none; } a, a:visited { color: #ffffff; } a:hover { color: lightseagreen; }
}

Nesting các element ul li a bên trong .Menu là 1 trong những tính năng nổi bật của SASS so với CSS thuần. Tiếp theo hãy thử sử dụng variables nhé:

# Menu.scss @import './variables.scss';
.Menu { background-color: $primary-background; ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; } li { margin: 10px 20px; } a { text-decoration: none; } a, a:visited { color: #ffffff; } a:hover { color: $primary-color; }
}

variables.scss được import để sử dụng các biến đã được define sẵn.

# variable.scss $primary-background: bisque;
$primary-color: lightseagreen;

Awesome! Sass còn rất nhiều tính năng mà bạn có thể tận dụng để productivity hơn, hiệu quả hơn trong việc styling React components.

Vẫn còn nhiều cách khác để styling ứng dụng React của bạn, phổ biến là styled-componentsCSS Modules

Cám ơn các bạn đã theo dõi bài viết của mình.

Cheers 🍻

Nguồn tham khảo:

https://scotch.io/tutorials/using-sass-in-create-react-app-v2

https://create-react-app.dev/docs/adding-a-sass-stylesheet

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 524

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 396

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 734

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 357

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 448

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 433