Giám sát và Biên dịch Sass trong Năm Bước Nhanh chóng

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Sass có lẽ là CSS pre-processor phổ biến nhất; Trong nhiều năm nó đã giúp chúng ta viết CSS sạch sẽ và gọn gàng, có thể sử dụng lại và mô-đun hoá. Trong bài hướng dẫn nhanh này, tôi sẽ đi thẳng vào những nội dung quan trọng và giải thích cách biên dịch Sass thành CSS bằng dòng lệnh.

1. Cài đặt Node.js

Để biên dịch Sass thông qua dòng lệnh, trước tiên chúng ta cần phải cài đặt node.js. Tải nó về từ trang web chính thức nodejs.org, mở gói cài đặt và làm theo hướng dẫn.

2. Khởi tạo NPM

NPM là Node Package Manager (Trình Quản lý Gói Node) dành cho JavaScript. NPM giúp dễ dàng cài đặt và gỡ bỏ các gói phần mềm bên thứ ba. Để khởi tạo dự án Sass bằng NPM, hãy mở Terminal và CD (chuyển thư mục) vào thư mục dự án của bạn.

Navigating to SASS-tutorial folder — Chuyển đến thư mục dự án Sass

Một khi ở đúng thư mục, hãy chạy lệnh npm init. Bạn sẽ được nhắc trả lời một số câu hỏi về dự án, sau đó NPM sẽ tạo một tập tin package.json bên trong thư mục của bạn.

3. Cài đặt Node-Sass

Node-sass là một gói NPM dùng để biên dịch Sass thành CSS (nó cũng biên dịch rất nhanh). Để cài đặt node-sass, hãy chạy lệnh dưới đây trong Terminal của bạn: npm install node-sass

4. Viết Lệnh Node-Sass

Tất cả mọi thứ đã sẵn sàng để viết một script nhỏ để biên dịch Sass. Mở tập tin package.json trong một code editor. Bạn sẽ thấy nó trông như thế này:

{
  "name": "sass-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Trong phần scripts thêm một lệnh scss, bên dưới lệnh test, như minh hoạ dưới đây:

1	"scripts": {
2	"test": "echo \"Error: no test specified\" && exit 1",
3	"scss": "node-sass -watch scss -o css"
4	}

Hãy tìm hiểu từng chi tiết một trong dòng code này.

node-sass: Là gói gói node-sass.
-watch: Một cờ hiệu không bắt buộc có nghĩa là "giám sát tất cả các tập tin .scss trong thư mục scss/ và biên dịch lại chúng mỗi khi có sự thay đổi."
scss: Tên thư mục mà chúng ta đặt tất cả các tập tin .scss của chúng ta.
-o css: Thư mục đầu ra cho CSS đã được biên dịch của chúng ta.

Khi chúng ta chạy script này, nó sẽ giám sát tất cả các tập tin .scss trong thư mục scss/, sau đó lưu css đã biên dịch trong thư mục css/ mỗi khi chúng ta thay đổi một tập tin .scss.

5. Chạy Script

Để chạy script một dòng của chúng ta, chúng ta cần phải chạy lệnh sau trong Terminal: npm run scss

Và đây rồi! Chúng ta đang giám sát và biên dịch SASS.

Những Mẹo nhỏ với Sass

Hãy chú ý theo dõi thêm những mẹo nhỏ với Sass; Có một bộ sưu tập những mẹo nhỏ như thế này!