SASS có lẽ là người phổ biến nhất trong số các bộ xử lý trước & NBSP; CSS; Trong nhiều năm, nó & nbsp; đã giúp & nbsp; us & nbsp; viết CSS sạch, có thể tái sử dụng và mô -đun. Trong hướng dẫn nhanh này, tôi sẽ cắt thẳng vào những thứ quan trọng và giải thích & nbsp; cách biên dịch SASS thành CSS bằng dòng lệnh.
1. Cài đặt Node.js Install Node.js
Để biên dịch SASS thông qua dòng lệnh, trước tiên chúng ta cần cài đặt Node.js. Tải xuống từ trang web chính thức Nodejs.org, mở gói và theo dõi trình hướng dẫn.
2. & NBSP; Khởi tạo NPM Initialize NPM
NPM là trình quản lý gói nút cho JavaScript. NPM giúp bạn dễ dàng cài đặt và gỡ cài đặt các gói bên thứ ba. Để khởi tạo một dự án SASS với NPM, hãy mở thiết bị đầu cuối và CD của bạn [thư mục thay đổi] vào thư mục dự án của bạn.
Khi trong đúng thư mục, chạy lệnh & nbsp; ________ 2. Bạn sẽ được nhắc trả lời một số câu hỏi về dự án, sau đó NPM sẽ tạo tệp A & NBSP; ________ 3 trong thư mục của bạn.
3. & NBSP; Cài đặt Node-Sass Install Node-Sass
Node-Sass là gói NPM biên dịch SASS với CSS [nó cũng rất nhanh]. Để cài đặt nút-sass, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn: npm install node-sass
4. & nbsp; Viết lệnh nút-sass & nbsp; Write Node-sass Command
Mọi thứ đã sẵn sàng để viết A & nbsp; tập lệnh nhỏ để biên dịch SASS. Mở tệp gói.json trong trình chỉnh sửa mã. Bạn sẽ thấy một cái gì đó 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 Script, thêm một lệnh SCSS, theo lệnh thử nghiệm, vì nó hiển thị bên dưới:scripts section add an scss command, under the test command, as it’s shown below:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch scss -o css"
}Hãy cùng đi qua dòng này từng chữ. & Nbsp;
-
node-sass: Đề cập đến gói nút-sass. -
--watch: Một cờ tùy chọn có nghĩa là xem tất cả các tệp .SCSS trong & nbsp; scss/ thư mục và biên dịch lại chúng mỗi khi có một sự thay đổi..scss files in the scss/ folder and recompile them every time there’s a change.” -
scss: Tên thư mục nơi chúng tôi đặt tất cả các tệp .SCSS của chúng tôi. -
-o css: Thư mục đầu ra cho CSS đã biên dịch của chúng tôi.
Khi chúng tôi chạy tập lệnh này, nó sẽ xem mọi tệp .scss trong thư mục & nbsp;
5. & nbsp; chạy tập lệnh Run the Script
Để thực hiện tập lệnh một dòng của chúng tôi, chúng tôi cần chạy lệnh sau trong thiết bị đầu cuối: & nbsp; ________ 13
Và Voila! Chúng tôi đang xem và biên soạn Sass.
Mẹo nhanh
Hãy theo dõi để biết thêm lời khuyên nhanh chóng; Có một bộ sưu tập toàn bộ trên đường đi!