SASS CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

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.

Cùng chuyên mục:

Mở đầu: Sự khác nhau giữa SASS và SCSS

Mở đầu: Sự khác nhau giữa SASS và SCSS

Khi bạn đọc series này bạn sẽ thấy mình giới thiệu và SASS mà lại…

Bài 16: Các hàm xử lý Number trong SASS

Bài 16: Các hàm xử lý Number trong SASS

Tiếp tục tìm hiểu các hàm có sẵn trong SASS và trong bài này chúng…

Bài 15: Các hàm xử lý chuỗi trong SASS

Bài 15: Các hàm xử lý chuỗi trong SASS

SASS cung cấp khá nhiều các hàm có sẵn giúp cho việc lập trình trở…

Bài 14: Function trong SASS

Bài 14: Function trong SASS

Function không còn xa lại gì trong các ngôn ngữ lập trình nhưng với SASS…

Bài 13: Vòng lặp each trong SASS

Bài 13: Vòng lặp each trong SASS

Ta đã biết vòng lặp foreach trong PHP dùng để lặp mảng và mỗi lần…

Bài 12: Vòng lặp while trong SASS

Bài 12: Vòng lặp while trong SASS

Vòng lặp for dùng để lặp cho những trường hợp ta biết trước tổng số…

Bài 11: Các toán tử hay dùng trong SASS

Bài 11: Các toán tử hay dùng trong SASS

SASS hỗ trợ khá nhiều toán tử không kém gì các ngôn ngữ lập trình,…

Bài 10: Vòng lặp for trong SASS

Bài 10: Vòng lặp for trong SASS

Vòng lặp là một khái niệm không còn xa lạ gì nữa với các bạn…

Bài 09: Lệnh if else trong SASS

Bài 09: Lệnh if else trong SASS

Còn khá nhiều kiến thức quan trọng của SASS mà bạn cần phải học và…

Bài 08: Tìm hiểu Mixin trong SASS

Bài 08: Tìm hiểu Mixin trong SASS

Mình đã từng code CSS cho nhiều trang và mình cũng phân chia và comment…

Bài 07: Nested Selector trong SASS

Bài 07: Nested Selector trong SASS

Như chúng ta biết hoạt động truy vấn các đối tượng HTML trong CSS sẽ…

Bài 06: Khai báo và sử dụng biến trong SASS

Bài 06: Khai báo và sử dụng biến trong SASS

Như mình đã nói SASS có những chức năng rất giống với một ngôn ngữ…

Bài 05: Tìm hiểu Place Holder trong SASS

Bài 05: Tìm hiểu Place Holder trong SASS

Trong bài này chúng ta tìm hiểu cách khai báo một Placer Hoder để cho…

Bài 04: Kế thừa extend trong SASS

Bài 04: Kế thừa extend trong SASS

Như một ngôn ngữ lập trình, SASS cho phép chúng kế thừa lẫn nhau và…

Bài 02: Cấu hình SASS trên Netbeans

Bài 02: Cấu hình SASS trên Netbeans

Sau khi cài đặt SASS xong thì chúng ta cần một editor để lập trình.…

Bài 01: SASS là gì? Cài đặt SASS trên Window

Bài 01: SASS là gì? Cài đặt SASS trên Window

Hôm nay chúng ta sẽ tìm hiểu một công nghệ mới dành cho các frontend…

Top