Sass là một công cụ tuyệt vời để làm cho CSS năng động hơn, nhưng nó vẫn là gánh nặng đối với nhiều người trong chúng ta vì các cài đặt biên dịch. Hãy xem cách chúng tôi có thể thiết lập một cấu hình tối thiểu nhưng hoạt động tốt
Tôi nghĩ cách dễ nhất để biên dịch Sass là thông qua các tập lệnh npm. Sử dụng các tập lệnh npm, chúng ta có thể chạy bất kỳ lệnh shell nào - được cấu hình sẵn, đã cài đặt - với một dòng đơn giản. Sass đi kèm với giao diện dòng lệnh [CLI], chúng ta có thể định cấu hình rộng rãi;
Phiên bản hiện tại của Sass là 1. 42. 1 và viết trên Dart. Chúng tôi có hai gói không dùng nữa có tên LibSass và Node Sass. Trong hướng dẫn này, chúng tôi - và bạn nên - sử dụng Dart Sass, đây là cài đặt mặc định khi cài đặt khi chúng tôi chạy lệnh npm install sass
1. Cài đặt nút. js trên hệ thống của bạn
Để sử dụng npm [để cài đặt Sass], trước tiên chúng ta phải cài đặt Node. js, điều mà chúng ta có thể dễ dàng thực hiện. Truy cập trang web chính thức và tải xuống trình cài đặt có liên quan [dựa trên hệ điều hành] hoặc sử dụng trình quản lý gói dòng lệnh của bạn như Homebrew hoặc Chocolatey
2. Khởi tạo NPM
Sau khi cài đặt, chúng ta có thể truy cập lệnh npm để khởi tạo các dự án mới và quản lý các phụ thuộc. Việc khởi tạo có nghĩa là tạo tệp package.json
nơi chúng tôi lưu trữ cấu hình của mình
Mở thiết bị đầu cuối của bạn, điều hướng đến thư mục gốc của dự án và chạy
bashnpm init
Trả lời các câu hỏi [mà bạn có thể sửa đổi sau] hoặc/và nhấn enter. Sau khi khởi tạo, tệp package.json
của chúng ta sẽ trông như thế này
json{
"name": "sass-compile",
"version": "1.0.0",
"description": "A simple sass compile config.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Adam",
"license": "ISC"
}
3. Cài đặt Sass
Để cài đặt Sass, chúng ta phải chạy lệnh npm sau
bashnpm install sass --save-dev
Cờ
json{
"name": "sass-compile",
"version": "1.0.0",
"description": "A simple sass compile config.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Adam",
"license": "ISC"
}
0 có nghĩa là Sass là một phụ thuộc phát triển [như bạn sẽ thấy trong package.json
của mình, nó nằm dưới đối tượng json{
"name": "sass-compile",
"version": "1.0.0",
"description": "A simple sass compile config.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Adam",
"license": "ISC"
}
2]Bây giờ chúng tôi có chức năng Sass với quyền truy cập vào CLI đã đề cập trước đó bằng các lệnh của nó
4. Đặt các lệnh biên dịch
Chúng tôi có thể thêm bất kỳ tập lệnh mới nào trong đối tượng tập lệnh. Chỉ cần xóa cái mặc định [có tên là test] và thêm vào như sau
json"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/scss:assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/scss:assets/css"
}
Như bạn thấy, chúng tôi thiết lập hai tập lệnh để biên dịch Sass
- nhà phát triển. đó là cho mục đích phát triển. Nó không bị nén, có bản đồ nguồn và trình theo dõi [để chạy cho đến khi chúng tôi dừng nó và theo dõi các thay đổi]
- sản xuất. đó là làm cho mã sản xuất của chúng tôi. Nó được nén, không có bản đồ nguồn và chỉ chạy một lần
Bản đồ nguồn là gì? . Điều này rất hữu ích vì chúng tôi có thể thấy tên tệp gốc khi chúng tôi gỡ lỗi CSS trong công cụ dành cho nhà phát triển
Cấu trúc thư mục dự án của chúng tôi [nên] trông như thế này
sass-compile/
├── assets/
│ ├── css/
│ │ └── main.css
│ └── scss/
│ ├── assets/
│ │ ├── _footer.scss
│ │ └── _header.scss
│ └── main.scss
├── node-modules/
└── package.json
Chúng tôi biên dịch các tệp Sass của mình từ thư mục
json{
"name": "sass-compile",
"version": "1.0.0",
"description": "A simple sass compile config.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Adam",
"license": "ISC"
}
3 sang thư mục json{
"name": "sass-compile",
"version": "1.0.0",
"description": "A simple sass compile config.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Adam",
"license": "ISC"
}
4. Chúng tôi không phải chỉ định tên tệp một cách rõ ràng [nhất thiết]; Để biết thêm thông tin về các cờ [văn bản trong lệnh thống kê với —], vui lòng truy cập trang CLI chính thức
Như bạn thấy, các tập lệnh npm hoạt động giống như một bí danh [hiện tại chúng tôi chỉ sử dụng Sass CLI]. Bạn có thể chạy bất kỳ lệnh nào trực tiếp trong thiết bị đầu cuối của mình [theo bất kỳ thứ tự nào hoặc song song], nhưng ví dụ này không thể hiện hết tiềm năng. Xin lưu ý rằng bài viết này chỉ nói về trình biên dịch Sass. Dựa trên các nhu cầu khác nhau, nó có thể phức tạp hơn một chút và có cấu trúc hơn
5. Chạy tập lệnh
Sau các bước trước, tất cả những gì chúng ta cần là chạy các tập lệnh của mình dựa trên tất cả các nhu cầu. Nếu bạn phát triển, sau đó sử dụng