Bài 03: Các lệnh biên dịch file SASS thành file CSS

Nếu bạn không muốn sử dụng Netbeans và chức năng Auto Generate của nó thì ban hoàn toàn có thể thực hiện được bằng cách sử dụng cú pháp command riêng của SASS. Trong bài này mình sẽ tìm hiểu một số lệnh hay sử dụng thôi nhé vì nó cũng không có gì quan trọng.

1. Một số lệnh trong SASS CSS

Tất cả các lệnh của SASS CSS dưới đây bạn đều phải chạy từ chương trình Start Command Prompt With Ruby nhé.

Lệnh sass --watch: tự động generate file css

Đây là lệnh dùng để cấu hình tự động cập nhật (generate) file SCSS thành file CSS. Cú pháp của nó như sau:

sass --watch path_to_file_scss:path_to_file_css

Bài viết này được đăng tại [free tuts .net]

Trước khi chạy lệnh này bạn phải chắc chắn rằng đã cd vào thư mục của Project nhé.

Ví dụ thư mục Project của tôi là:

D://vertrigo/www/sass
                     |- css
                     |- scss
                            |- style.scss

Lúc này bạn sẽ dùng lệnh cd để đến thư mục D://vertrigo/www/sass, sau đó viết lệnh watch cho file scss/style.scss như sau:

sass --watch scss/style.scss:css/style.css

Sau khi chạy lệnh này thì nó sẽ tự tạo một file css/style.css và mỗi lần bạn lưu mới thì nó sẽ tự động cập nhật luôn.

Lệnh compact - convert css thành một hàng

Lệnh compact là một option của lệnh watch và nó có tác dụng là lúc generate nó sẽ chuyển css thành một hàng.

Cú pháp: 

sass --watch path_to_file_scss:path_to_file_css --style compact

Ví dụ:

sass --watch scss/style.scss:css/style.css --style compact

Lệnh compressed - nén file css

Để tối ưu CSS thì thông thường ta sẽ nén file css lại bằng cách xóa đi các khoảng trắng và xuống hàng. Điều này cũng làm được khi bạn sử dụng SASS bằng cách sử dụng cú pháp compressed, đây cũng là một option của lệnh watch.

Cú pháp:

sass --watch path_to_file_scss:path_to_file_css --style compressed

Ví dụ:

sass --watch scss/style.scss:css/style.css --style compressed

Lệnh expanded - chuyển về định dạng expanded

Nếu bạn muốn file CSS được generate nhìn đẹp và theo từng hàng, từng dòng như code tay thì bạn sử dụng option expanded.

Cú pháp:

sass --watch path_to_file_scss:path_to_file_css --style expanded

Ví dụ:

sass --watch scss/style.scss:css/style.css --style expanded

2. Lời kết

Trên là một số lệnh thường sử dụng trong SASS để generate thành file CSS. Thông thường chúng ta sẽ chọn lệnh watch với option là compressed bởi vì file nén sẽ tối ưu nên website sẽ chạy nhanh hơn.

Như vậy khi sử dụng các lệnh này thì bạn không cần sử dụng Netbeans vẫn được, tuy nhiên có một bất lợi là khi bạn tạo nhiều file Sass thì banj phải thực hiện lệnh cho từng file, vì vậy mình nghĩ bạn cũng nên sử dụng editor để nó gọi tự động thì hay hơn.