biên dịch sass sang css sử dụng prepros

Biên dịch SASS sang CSS sử dụng Prepros7 phút đọc

Một trong những điều kiện bắt buộc khi sử dụng SASS đó là phải biên dịch từ file SASS sang một file CSS để có thể sử dụng trong dự án.

Trong rất nhiều cách biên dịch SASS sang CSS thì mình thấy cách nhanh chóng và hiệu quả nhất đó là sử dụng phần mềm bên thứ ba hỗ trợ.

Trong bài viết này mình sẽ giới thiệu đến các bạn cách sử dụng Prepros phần mềm giúp biên dịch SASS sang CSS tốt nhất hiện nay.

Giới thiệu Prepros

Prepros là phần mềm hỗ trợ biên dịch SASS sang CSS rất tuyệt vời và được đông đảo lập trình viên trên thế giới sử dụng.Có thể khi làm quen với SASS thì bạn có nghe đến cái tên Koala, một trình biên dịch SASS sang CSS cũng nổi tiếng không kém Prepros.

Nhưng trong quá trình sử dụng mình nhận thấy cả về giao diện lẫn chức năng thì Prepros vượt trội hơn so với Koala rất nhiều.

biên dịch sass sang css sử dụng prepros

Sử dụng Prepros miễn phí hay mất phí ?

Prepros có cả bản miễn phí và bản trả phí cho bạn lựa chọn.Điều hay là bản miễn phí có đầy đủ chức năng của bản trả phí, chỉ khác ở chỗ khi sử dụng bản miễn phí thì thỉnh thoảng sẽ có xuất hiện một popup trong quá trình sử dụng để nhắc nhở bạn mua bản trả phí nếu yêu thích Prepros.

Nếu bạn có tài chính tốt hay đơn giản là không muốn thấy cái popup hiện lên thì bạn hoàn toàn có thể bỏ ra khoảng 600k để sở hữu Prepros sau khi dùng thử.Còn muốn sử dụng nó miễn phí thì bạn có thể download nó ngay bây giờ.

Download : Prepros

Chức năng chính của Prepros

Trước khi đến với cách sử dụng Prepros thì chúng ta cùng điểm qua vài chức năng chính của nó nhé.Chắc chắn bạn sẽ muốn sở hữu nó khi đọc qua phần này đó.

  • Kiểm tra lỗi cú pháp SASS và hiển thị vị trí lỗi trực quan trên giao diện phần mềm
  • Tự động nén file CSS sau khi biên dịch ra từ SASS
  • Truyền file đi bằng FTP hay SFTP
  • Giám sát sự thay đổi của file qua bảng thông báo
  • Có thể sử dụng chế độ Live Reload

Sử dụng Prepros biên dịch SASS sang CSS

Thiết lập chức năng biên dịch

Đầu tiên bạn cần download Prepros về và tiến hành cài đặt nó.Phần cài đặt phần mềm rất đơn giản nên mình không giải thích mà sẽ đi luôn vào phần hướng dẫn sử dụng Prepros nhé.

biên dịch sass sang css sử dụng prepros ảnh 1

Sau khi bạn cài đặt xong Prepros và khởi động nó lên thì sẽ có giao diện như trên.Bạn đừng lo lắng vì thấy màn hình trống trơn không có gì.

Giờ bạn kéo cả thư mục dự án hoặc chỉ thư mục hay file chứa SASS vào trong màn hình này rồi thả ra.Ngay lúc đó bạn sẽ thấy màn hình giao diện của Prepros thay đổi như hình dưới đây.

biên dịch sass sang css sử dụng prepros ảnh 2

Bạn có thể thấy rằng lúc này giao diện của Prepros được chia làm 3 phần.Phần bên trái là nơi hiển thị dự thư mục hay file dự án của bạn.Phần ở giữa là nơi hiển thị những chức năng và thông báo của Prepros liên quan đến dự án bạn đang thao tác.Còn phần bên phải là nơi bạn thiết lập chức năng biên dịch SASS sang CSS.

Ở phần giữa trong tab Files bạn hãy chọn đến file .scss hay .sass mà bạn muốn biên dịch thành CSS.Tiếp theo bạn nhìn sang phần phía bên phải để thiết lập chức năng biên dịch cho nó.Giờ mình sẽ giải thích từng mục trong đó để bạn nắm rõ nhé.

  • OUTPUT FILE
    • Đây là nơi bạn thiết lập đường dẫn hay nơi chứa file CSS sau khi được biên dịch ra.Mặc định thì nó sẽ cùng vị trí với file .scss hay .sass.Bạn có thể thay đổi vị trí chứa file CSS được biên dịch ra bằng cách nhấn vào tên file bên cạnh dấu mũi tên.
  • FILE OPTIONS 
    • Process Automatically : Bạn hãy tích vào đây nếu muốn sau mỗi lần lưu file .scss / .sass thì phần mềm sẽ tự động cập nhật và  biên dịch luôn sang CSS cho bạn.
    • Create a Source Map : Khi tiến hành debug lỗi trên trình duyệt như Chrome, nếu có lỗi CSS xảy ra thì nó sẽ hiện rõ lỗi đó nằm ở đâu trên file .sass / .scss cho bạn.Nếu check vào mục này thì khi biên dịch sẽ có thêm một file .map được tạo ra.
  • AUTOPREFIXER 
    • Prefix CSS :  Khi tích vào mục này thì có nghĩa là bạn sẽ để phần mềm tự động thêm những tiền tố như -webkit-, -moz-, -o-, -ms- vào trước những thuộc tính CSS3 mới để chúng có thể chạy ổn định trên nhiều trình duyệt khác nhau.
  • MINIFY-CSS
    • Minify CSS : Phần mềm Prepros sẽ tiến hành biên dịch SASS sang CSS đồng thời nén luôn file CSS này lại cho bạn để tiết kiệm dung lượng.
  • UPLOAD/EXPORT 
    • Include file while uploading : Chức năng này còn mới và không được sử dụng nhiều trong thực tế.

Sau khi đã thiết lập xong chức năng biên dịch sang CSS cho Prepros thì bạn hãy nhấn nút Process File để tiến hành biên dịch.Sẽ xuất hiện ngay một file CSS mới ở nơi bạn đã chọn chứa file CSS sau khi biên dịch.

Từ giờ trở đi mọi thứ đều tự động hết nên bạn chỉ cần nhấn lưu file .scss / .sass và mọi thứ sẽ được cập nhật sang file CSS.Bạn lưu ý khi làm dự án thì hãy mở luôn cả Prepros lên không thì làm mãi mà lại không thấy thay đổi gì.

Đọc hiểu thông báo lỗi

biên dịch sass sang css sử dụng prepros ảnh 3

Ở phần giữa màn hình trong tab Log là nơi hiển thị thông báo lỗi và những lần cập nhật file thành công.Nhìn vào đây bạn hoàn toàn có thể biết được file SASS của bạn gặp lỗi ở vị trí nào, đó là lỗi gì để tiến hành trình sửa ngay nếu có lỗi xảy ra.

Sau mỗi lần lưu file SASS thì sẽ có một popup nhỏ hiện lên góc trên bên phải màn hình để bạn biết rõ file đã được biên dịch thành công hay chưa.

Gửi file và xuất file

biên dịch sass sang css sử dụng prepros ảnh 4

Tab Upload là nơi bạn có thể  Export file của dự án hoàn chỉnh ra mà trong đó không có file SASS trong đó.Chức năng này rất tiện lợi và tránh được nhầm lẫn trong khi thao tác.

Ngoài ra bạn còn có thể Upload toàn bộ file hoàn chỉnh của dự án lên server mà không cần qua một phần mềm trung gian nào khác.Quá tiện lợi phải không nào.

Bạn nào đã từng kết nối và gửi file lên server bằng FTP / SFTP thì sẽ không xa lạ gì với phần Upload này.Chỉ cần điền đầy đủ thông tin của server là kết nối sẽ được thành lập và có thể gửi file rất nhanh chóng.

Bonus

biên dịch sass sang css sử dụng prepros ảnh 5

Với Prepors bạn có thể thay đổi màu theme từ sáng sang tối và ngược lại bằng cách chọn theme mong muốn trong phần Settings.Thêm nữa bạn cũng có thể lựa chọn màu chủ đạo cho các thành phần trong Prepros.

Kết luận

Biên dịch từ SASS sang CSS là bước đầu tiên nếu bạn muốn sử dụng SASS để viết CSS.Và với bài viết này mình hi vọng bạn sẽ vượt qua bước đầu tiên này một cách dễ dàng.

Những bài tiếp theo chúng ta sẽ bắt đầu học SASS từ đơn giản đến nâng cao và bạn đừng quên theo dõi nhé.

 

 

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