biên dịch sass sang css trên VS Code

Biên dịch SASS sang CSS trên VS Code5 phút đọc

Trong bài viết ngày hôm nay mình sẽ giới thiệu đến các bạn cách biên dịch SASS sang CSS trên VS Code bằng cách cài đặt và sử dụng Extension Live SASS Compiler.

Bài viết này nằm trong series bài viết “Học và hướng dẫn sử dụng SASS toàn tập“. Nếu bạn chưa có nhiều kinh nghiệm về SASS thì nên đọc các bài viết trong series này ngay để nâng cao trình độ của mình.

VS Code là gì ?

Visual Studio Code(VS Code)là một trình soạn thảo code chuyên nghiệp được cung cấp bởi gã khổng lồ trong ngành công nghệ thông tin Microsoft.Đây là trình soạn thảo code miễn phí tốt nhất trên thế giới hiện nay.

Với nhiều Extension tuyệt vời được thêm vào một cách nhanh chóng, cách sử dụng dễ dàng và hỗ trợ tối đa nhiều ngôn ngữ là lý do VS Code đang là trình soạn thảo code phổ biến nhất.

Biên dịch SASS sang CSS trên VS Code

Trong những bài trước thuộc series “Học và hướng dẫn sử dụng SASS toàn tập” mình có giới thiệu đến các bạn phần mềm Prepros để biên dịch SASS sang CSS.

Nếu không có popup hiện lên ở bản miễn phí thì đó là sự lựa chọn hoàn hảo cho những ai cần một phần mềm trung gian để biên dịch SASS sang CSS.

Có một tin vui cho những ai đang sử dụng trình soạn thảo code VS Code là bạn sẽ không cần đến một phần mềm trung gian nào để biên dịch SASS sang CSS cả.Tất cả đã có Extension Live SASS Compiler của VS Code tự động làm cho bạn.

Quá tuyệt vời phải không nào ? Giờ chúng ta sẽ tìm hiểu cách cài đặt trình soạn thảo code VS CodeExtension Live SASS Compiler  nhé.

Cài đặt Code Editor VS Code

biên dịch sass sang css trên vs code ảnh 1

Nếu bạn chưa cài đặt trình soạn thảo code VS Code trên máy tính của bạn thì việc đầu tiên bạn cần làm là truy cập vào link dưới đây tải nó về và tiến hành cài đặt ngay.

Trình soạn thảo code VS Code này hỗ trợ cả ba nền tảng là Mac, Window và Linux.Việc cài đặt rất đơn giản nên mình sẽ không giải thích thêm ở đây.

 

Cài đặt Extension SASS Live Compiler

Sau khi bạn cài đặt trình soạn thảo code VS Code xong, khởi động nó lên thì sẽ có giao diện giống như hình dưới đây.

biên dịch sass sang css trên vs code ảnh 2

Phía ngoài cùng bên trái có một danh sách các Icon, bạn nhấn vào icon có hình 4 khối vuông với một khối hơi bị lệch ra ngoài.Lúc này một danh sách menu các Extension sẽ hiện ra.

biên dịch sass sang css trên vs code ảnh 3

Trong khung tìm kiếm Extension bạn gõ từ khóa 「Live Sass Compiler」.Khi thông tin Extension Live Sass Compiler, bạn hãy chọn nó và nhấn nút 「Install」để tiến hành cài đặt.

Sử dụng Extension Live Sass Compiler

biên dịch sass sang css trên vs code ảnh 4

Sau khi bạn cài đặt Extension Live Sass Compile xong, bạn hãy nhìn xuống thanh menu dưới cùng của trình soạn thảo code VS Code.Lúc này sẽ xuất hiện thêm một menu có tên “Watch Sass“.

Mỗi khi bạn làm việc với file .scss bạn hãy nhấn vào menu này để trình soạn thảo code VS Code giám sát file .scss này và biên dịch nó mỗi khi bạn lưu lại tài liệu.

Như bạn thấy ở hình trên khi mình nhấn lưu tài liệu .scss thì ngay lập tức có thêm một file .css được biên dịch ra cùng vị trí với file .scss.Kèm theo đó là file .css.map, nhưng file này không cần thiết và bạn có thể xóa nó đi nếu muốn.

Thêm vào đó mỗi lần bạn nhấn lưu tài liệu .scss thì sẽ có thông báo hiện lên ở phần OUTPUT ngay phía trên thanh menu dưới cùng của VS Code.Nhìn vào đây nếu có lỗi xảy ra trong quá trình biên dịch SASS sang CSS bạn sẽ biết được lỗi đó nằm ở đâu mà sửa.

Kết luận

Trước đây khi sử dụng SASS viết CSS mình có dùng thử qua nhiều phần mêm biên dịch SASS sang CSS như Koala hay Prepros.Tuy nhiên thời gian gần đây mình đã chuyển sang biên dịch SASS sang CSS trên VS Code vì sự tiện lợi.

Bạn có đang sử dụng SASS để viết CSS không ? Và trình biên dịch SASS sang CSS bạn đang sử dụng là gì ? Nếu thấy cách biên dịch SASS sang CSS trên VS Code này hay bạn hãy áp dụng nó và chia sẻ kinh nghiệm cho bạn bè nhé.

Hẹn gặp lại bạn trong các bài viết tiếp theo.Chúc bạn luôn thành công hạnh phúc trong cuộc sống và công việc.

Bài viết trước

Tham khảo bài viết

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x