Hướng dẫn sass/scss - sass / scss
SASS: Là gì, tại sao và như thế nào?SASS là một bộ tiền xử lý CSS, giúp bạn sử dụng các tính năng không tồn tại trong CSS như các biến, lồng nhau, mixins, function, các tính năng tiện lợi khác. Điều này giúp cho code dễ đọc, ngắn gọn, dễ kế thừa và maintain hơn so với cách viết CSS truyền thống. Khi bạn bắt đầu chạy, nó sẽ lấy tệp Sass của bạn, chuyển đổi và lưu nó dưới dạng tệp CSS bình thường mà bạn có thể sử dụng trong trang web của mình. Show Khởi tạo dự ánĐầu tiên, cần tạo 1
Bạn có thể tham khảo cây thư mục dưới đây của mình
Cài đặt SASSĐầu tiên, chúng ta sẽ cài đặt sass , thư viện giúp để biên dịch 5 hoặc 6 các tệp thành 7.
Trong file
Viết codeSau khi đã cài đặt SASS, chúng ta có thể bắt đầu làm việc trên dự án của mình. Chúng ta sẽ bắt đầu bằng cách tạo một file 6 trong thư mục 1. Tạo một file 5 trong 1 và import nó vào 7.
5 là một file chứa tất cả các style cơ bản cho dự án. Đó là một nơi tốt để đặt các style global như màu sắc, phông chữ, kích thước và các style khác được sử dụng trong toàn bộ dự án. Có 1 số style cơ bản thường dùng như:
Thêm SASS vào HTMLTrình duyệt không thể hiểu SASS. Vì vậy, chúng ta cần thêm file đã biên dịch của SASS (CSS) vào HTML. Chúng ta có thể thêm bằng cách thêm thẻ 9 vào trong 0.
Bây giờ chúng ta có thể chạy 1 tại terminal để chuyển đổi từ 6 sang 7.Môi trường Development và ProductionCó 1 vài sự khác biệt khi build ở môi trường development và production. Nếu ở môi trường Dev, bạn cần giữ code nguyên vẹn, cùng với 4 giúp debug và dễ dàng tìm kiếm khi phát sinh lỗi, lỗi ở đâu. Nếu ở môi trường Prod, bạn cần nén code, loại bỏ 4, những khoảng trống và comment không cần thiết để tăng hiệu suất.Khi nãy chúng ta đã tạo 1 lệnh giúp build code về CSS, bây giờ hãy tách riêng nó ra 2 phiên bản cho phù hợp với đặc điểm của mỗi môi trường.
Dev Script: 6 giúp SASS lắng nghe trong thư mục 1 và biên dịch lại nếu phát hiện có sự thay đổi trong file. 8 để tạo ra 4 dành cho file CSS đã được biên dịch.Prod Script: Sử dụng 0 để không khởi tạo 4. Còn 2 giúp nén và loại bỏ bất kỳ khoảng trắng không cần thiết nào khỏi file CSS đã biên dịch. Cả hai tùy chọn này sẽ giảm kích thước file và cải thiện hiệu suất khi tải trang.Kết luận
|