Nếu bạn ở đây, tôi sẽ cho rằng bạn đã biết Sass là gì và chỉ muốn làm điều chết tiệt đó
Hướng dẫn này cũng dành riêng cho cú pháp .scss
của Sass
Điều này giả định rằng bạn đã có tệp
package.json
. Nếu không, hãy chạynpm init
và nhập thông qua các giá trị mặc địnhChạy
0 để cài đặt node-sass"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
Thiết lập cấu trúc tệp của bạn ⚙
Trong thư mục gốc của bạn, tạo một thư mục
1 với một thư mục"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
2 và một thư mục"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
3"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
Trong
4, tạo tệp"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
5"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
Trong
6, tạo tệp"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
7"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
________số 8_______
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Xem phần để biết thêm chi tiết về cấu trúc tệp được đề xuất
Xem các thay đổi đối với tệp Sass 🔍
- Trong
package.json
, trong phần
9 thêm"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
0 như vậy@import "test/test";
"scripts": {
"sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
},
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Cờ theo dõi
1 yêu cầu nút-sass xem tệp@import "test/test";
5 trong thư mục"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
3 để biết các thay đổi và xuất chúng trong@import "test/test";
7 trong thư mục style/css"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
Điều này cũng giả sử thư mục
1 của bạn nằm trong thư mục gốc. Bạn có thể cần điều chỉnh các đường dẫn tệp này nếu bạn đang sử dụng thứ gì đó như React hoặc Vue và có thư mục"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
1 của bạn trong thư mục"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
7 chẳng hạn@import "test/test";
- Trong trường hợp thiết bị đầu cuối, hãy chạy
8 để theo dõi các thay đổi đối với. scss và tự động biên dịch chúng thành css@import "test/test";
Một phần 🔸
Điều duy nhất trong thư mục
"scripts": {
"sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
},
5 của bạn phải là nhập dữ liệu khác của bạn. scss, còn được gọi là partialsTất cả các phần bắt đầu bằng dấu gạch dưới [_]
Tạo một thư mục khác trong thư mục
0 của bạn, chẳng hạn như$red: red; // declare a variable h1 { color: $red; }
1$red: red; // declare a variable h1 { color: $red; }
thêm một. scss trong thư mục /test chẳng hạn như
2$red: red; // declare a variable h1 { color: $red; }
Nhập một phần tệp vào tệp
5 của bạn"scripts": { "sass": "node-sass styles/sass/main.scss styles/css/style.css -w" },
@import "test/test";
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bạn không cần bao gồm dấu gạch dưới hoặc phần mở rộng tệp khi nhập
Kiểm tra nó ra 🧪
- Trong tệp
2 của bạn, hãy thêm nội dung nào đó như$red: red; // declare a variable h1 { color: $red; }
$red: red; // declare a variable
h1 {
color: $red;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
- Lưu các tập tin. Bạn sẽ không thấy bất kỳ lỗi nào trong thiết bị đầu cuối nếu sass được biên dịch thành công. Bạn sẽ thấy h1s trên trang của mình cập nhật thành màu đỏ. Nếu bạn truy cập
5, bạn sẽ thấy css đã biên dịch$red: red; // declare a variable h1 { color: $red; }
h1 {
color: red;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
- Nếu bạn không thấy bản cập nhật màu hoặc CSS đã biên dịch, hãy đảm bảo rằng bạn đang chạy
8 trong phiên bản đầu cuối@import "test/test";
Sắp xếp tệp Sass 📚
Có nhiều cách để sắp xếp các tệp Sass của bạn và nó thực sự phụ thuộc vào sở thích cá nhân
Kiến trúc 7-1 là một cấu trúc phổ biến cho các dự án lớn hơn, mặc dù cá nhân tôi thấy nó hơi quá mức cần thiết cho các dự án cá nhân nhỏ hơn
Tuy nhiên, bạn sẽ cảm ơn chính mình vì đã có sẵn một kiến trúc tệp vững chắc nếu dự án của bạn ngày càng phát triển hoặc mở rộng quy mô.