Update cách sử dụng Package SASS

• Tên cũ là package này Node-sass. Nhưng gần đây họ đã bỏ hỗ trợ Node-sass nên khi cài bạn sẽ nhận được warning của npm( hoặc yarn) khi cài đặt. Trên trang npm thì họ cảnh báo( warning) rằng nó vẫn nhận được cập nhật tính năng nhưng không nhận được các bản cập nhật tính năng.

1) Cách cài đặt SASS

• Vậy thì chúng ta sẽ cài đặt package SASS mới. cách cài đặt local project:

npm install --save--dev sass

• Cú pháp sử dụng thì mình chỉ nêu cách sử dụng CLI--- Comman Line Interface giống Admin sơn trong các bài hướng dẫn. Nếu bạn cần sử dụng cách khác các bạn có thể đọc trên trang chủ tại đây: https://sass-lang.com/documentation .

Compile một file scss -> một file css

sass --flag <input.scss> [output.css]

• <input.scss> : là đường dẫn file/ tên file đầu vào định dạng name.scss
• [output.css] : là đường dẫn file/ tên file đầu ra định dạng name.css
• flag: là cờ mà bạn cần sử dụng. Mình khuyên dùng 2 flag là : --embed-source-map và --watch( nó dùng để lắng nghe sự thay đổi và compile tự động không cần chạy thủ công)

Example:

Mình chỉ compile 1 file scss thành 1 file css tại folder đầu ra. Tuy nhiên bản mới này nó tạo thành 1 file .css.map rất khó chịu. Mình sẽ sử dụng 1 flag --embed-source-map nó sẽ nhúng vào file đầu ra. Như bạn thấy thì ta không cần thêm flag --output nữa. Nó sẽ tự nhận diện và xuất ra file css. --watch thì nó sẽ lắng nghe file main.scss và nếu có thay đổi mà bạn save nó sẽ compile ngay lập tức.

sass  --embed-source-map --watch  sass/main.scss public/css/main.css

Compile nhiều file scss->css

sass --flag <input.scss>:[output.css] <input.scss>:[output.css]

• cú pháp vẫn thế chỉ có điều bạn cần thêm dấu : ngăn cách giữa cách giữa đầu ra và đầu vào. Khoảng trắng ở giữa cách cặp file cần complile.

Example:

sass  --embed-source-map --watch  sass/main.scss:public/css/main.css  sass/responsive.scss:public/css/responsive.css

Compile theo folder

sass --flag <path folder input file>:[path folder output file ]

• cú pháp là bạn đường dẫn 2 folder input và output ngăn cách nhau bởi dấu : . Bạn nên thêm 2 flag mình đề xuất.

Example: sass --embed-source-map --watch src/sass:public/css/

Chúc các bạn học tập thật tốt nhé ^^.