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

Học Cùng HoaL- Cài đặt môi trường SCSS

0 0 27

Người đăng: Hòa lê

Theo Viblo Asia

1. Cài đặt

1.1. Cài nodejs

B1: Bạn chỉ cần vào link bên dưới chọn tải về, rồi next, next để chạy thôi LINK

B2: Bạn kiểm tra version, để xem cài oke chưa

node -v
npm -v

image.png

1.2 Cài SASS

npm install -g sass

OKE vậy là cài xong môi trường nha! ?

2. Biên dịch SCSS sang CSS

Tạo 1 file scss style.scss có nội dung như đoạn code bên dưới.

$primary__color: blue;
$background__color: #f1f1f1;
section { background-color: $background__color; h2 { color: $primary__color; }
}

Để biên dịch bạn vào thư mục chứa file style.scss, chạy lệnh này.

sass style.scss style.css

kết quả, nó sẽ tạo ra hai file mới đó là style.css và style.css.map image.png

Có một vấn đề là ở css, code xong chỉ cần save file rồi reload trang là oke, nhưng mà giờ muốn tự động save thì sao ? Tôi thích câu hỏi của bạn? ❤️

Quá đơn giản mình cài đặt npm trong thư mục SCSS (vì mình tạo tên thư mục là SCSS nha, còn bạn đặt tên gì cũng được nghe ?)

3. Cài đặt SCSS trong npm project

B1: Chạy lệnh sau, thì nó sẽ tạo ra file package.json

npm init

B2: Cài đặt gói node-sass, chạy lệnh sau. Có bạn sẽ hỏi, phần 1.2 cài sass rồi mà giờ còn cài giề nữa ?, tới đây thì mình hơi sorry nha, vì đã bắt bạn làm Phần 2 ?, mình chỉ muốn bạn hiểu hơn. là scss sẽ render phần code đã viết về css. còn mình dùng node-sass này thì nó auto render cho mình luôn nha ?.

npm install node-sass

Okay, sau khi chạy xong thì cấu trúc thư mục sẽ như hình bên dưới.

image.png

B3: Giờ bạn vào trong file package.json tìm và thay thế đoạn code bên dưới.

 "scripts": { "scss": "node-sass --watch style.scss -o css" }

Thay xong thì nó sẽ như này.

image.png

Cuối cùng muốn biên dịch tự động thì run command này

npm run scss

Oke, giờ muốn test thì tạo một file html, liên kết đến cái file /css/style.css được tạo ra khi bạn run dòng lên npm run scss là xong. Được rồi giờ bạn, chỉnh scss đi, rồi save lại thì nó sẽ auto change nha. Tận hưởng đi ?.

<!DOCTYPE html>
<html lang="en"> <head> <title>Title</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <h1 class="title">Hello world! I'm comming</h1> </body>
</html>

Kết quả đây nha ! image.png

Cảm ơn bạn đã đi cùng HoaL ?. Bye, see you next time !

Bình luận

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

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

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++. .

0 0 79

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

Căn giữa phần tử trong CSS

1. Theo chiều ngang. Đó có phải là phần tử inline hay inline-* (như text hay links). .

0 0 66

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

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 62

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

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 74

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

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 65

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

Style text css

Giới thiệu. Chào 2021, mình sẽ giới thiệu vài kiểu style cho text màu mè chút cho rực rỡ .

0 0 44