Nếu bạn không quen sử dụng phần mềm Netbeans và công cụ  Auto Generate của nó thì thay vào sử dụng nó bạn hoàn toàn có thể làm cách khác thông qua sử dụng các cú pháp command riêng của SASS. Trong bài này mình sẽ giới thiệu cho các bạn một số câu lệnh cơ bản hay sử dụng vì nó cũng không có gì quan trọng lắm. Hãy cùng tìm hiểu nhé.

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

Những câu lệnh của SSAS và CSS dưới đây các bạn đều phải sử dụng Start Command Prompt With Ruby.

Lệnh sass –watch: auto generate file css.

Câu lệnh này có chức năng cấu hình phần tự động cập nhật (generate) file SCSS trở thành file CSS. Và đây là cú pháp của nó:

screen-shot-2016-10-01-at-8-30-36-am

 

Bạn cần phải CD vào thư mục của Project để có thể chạy được câu lệnh này nhé.

Ví dụ thư mục Project của tôi ở đây là

screen-shot-2016-10-01-at-8-34-10-am

Sử dụng lệnh CD để truy cập vào đường dẫn D://vertrigo/www/sass, Tiếp tụ viết lệnh watch cho file scss/style.scss như thế này:

screen-shot-2016-10-01-at-8-47-14-am

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

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

Lệnh compact thực chất là một tuỳ chọn khác của lệnh watch  tác dụng của nó là lúc generate CSS sẽ chuyển hết về một hàng.

Câu lệnh:

screen-shot-2016-10-01-at-8-52-27-am

Ví dụ:

screen-shot-2016-10-01-at-8-52-37-am

Lệnh compressed – nén file css

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

Cú pháp:

screen-shot-2016-10-01-at-9-06-46-am

Ví dụ:

screen-shot-2016-10-01-at-9-06-55-am

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

sử dụng option expanded. để CSS nhìn bắt mắt hơn, đẹp và theo từng hàng, từng dòng như code.

Cú pháp:

screen-shot-2016-10-01-at-9-07-57-am

Ví dụ:

screen-shot-2016-10-01-at-9-08-06-am

2. Lời kết

Vậy là chúng ta đã tìm hiểu một số câu lệnh được dùng trong SASS để generate thành file CSS. Ở đây mình khuyến khích nên dùng câu lệnh watch với option là compressed vì file nén sẽ được tối ưu hoá và sẽ giúp website chạy nhanh hơn.

Với các câu lệnh này thì bạn có thể không cần sử dụng tới netbeans  tuy nhiên sẽ xuất hiện một sô bất tiện nhất định như khi bạn tạo ra quá nhiều  file Sass thì bạn phải thực hiện lệnh cho từng file, Vậy nên bạn hãy dùng editor để nó gọi tự động thì sẽ tiện lợi hơn khá nhiều.

Xem thêm:

Còn nhiều bài viết hữu ích tại thiết kế web, các bạn đón đọc nhé.

 

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *