Chia sẻ kiến thức

Sử dụng SASS để nén file stylesheet css, scss

0

Trang web của chúng tôi thường sử dụng File css style sheet để trang trí. Tuy nhiên, trang web cũng cần tải xuống các File này. File càng nặng thì tốc độ trang web càng chậm. Vì vậy chúng ta cần nén các tập tin css (minify css) để giảm dung lượng của chúng xuống mức tối thiểu mà không ảnh hưởng đến giao diện của trang web.

Vì vậy trong bài viết này tôi muốn hướng dẫn các bạn sử dụng sass. Một công cụ dùng để ghi style cũng như nén file css tốt nhất.

Cài đặt SASS

Để cài đặt sass, vui lòng xem thông tin trên trang chủ để biết Cách cài đặt phù hợp với hệ điều hành của bạn.

Nén File CSS với SASS

Ví dụ: chạy lệnh nén File sau

sass main.css:style.min.css --style compressed

Kết quả là nó sẽ nén file main.css => style.min.css với dung lượng 15,8 kB => 10,8 kB

Tải game crack việt hoá tại: https://daominhha.com

File style.min.css.map cho chúng tôi biết File style.min.css đã được nén từ File nào. Nếu chúng ta không cần tạo File này, chúng ta sử dụng lệnh sau:

sass main.css:style.min.css -no-source-map --style compressed

Để nén liên tục nếu File main.css thay đổi, ta thêm tham số –watch

sass --watch main.css:style.min.css -no-source-map --style compressed

Nén File CSS bằng SASS và File Watch trên PHPStorm

PHPstorm là một IDE nổi tiếng dùng để lập trình PHP, PHPStorm hỗ trợ chúng ta công cụ File Watch để tạo các hành động khi một tập tin thay đổi. Tôi sẽ sử dụng tính năng này để không phải chạy lệnh bên ngoài mà vẫn có thể nén File main.css

Trên PHPStorm, bạn đi tới [ File ] => [ Settings ] => [ Tools ] => [ File Watch ] Tạo một File Watch với nội dung sau:

Phần phạm vi bạn tạo Phạm vi cục bộ và sau đó chỉ định File main.css

Nguồn: vinasupport.com

Leave a comment