Kiến thức cơ bản về Sass - bài 1 Tiền xử lý (Preprocessing)
Lượt xem: 2405
Trước khi bạn có thể sử dụng Sass, bạn cần thiết lập nó cho dự án của bạn. Nếu bạn chỉ muốn duyệt ở đây, hãy tiếp tục, nhưng chúng tôi khuyên bạn nên cài đặt Sass trước.
Để cài đặt mời bạn tham khảo bài viết làm sao để thiết lập Sass
Tiền xử lý (Preprocessing)
Bản thân CSS có thể là thú vị. Nhưng những bảng định dạng kiểu (stylesheets) ngày càng lớn hơn, phức tạp hơn và khó bảo trì hơn.
Đây là nơi bộ tiền xử lý có thể giúp bạn. Sass cho phé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, hỗn hợp (mixins), kế thừa và các tính năng tiện lợi khác giúp viết CSS vui vẻ trở lại.
Khi bạn bắt đầu mày mò với Sass, nó sẽ lấy tệp Sass được xử lý trước của bạn 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.
Cách trực tiếp nhất để thực hiện điều này là trong thiết bị đầu cuối của bạn. Khi Sass được cài đặt, bạn có thể biên dịch Sass của mình sang CSS bằng lệnh sass. Bạn sẽ cần cho Sass biết tập tin nào sẽ được xây dựng từ đâu và xuất CSS ở đâu.
Ví dụ: chạy sass input.scss output.css từ thiết bị đầu cuối của bạn sẽ lấy một tệp Sass, input.scss và biên dịch tệp đó thành output.css.
Bạn cũng có thể xem các tệp hoặc thư mục riêng lẻ với cờ --watch.Cờ watch yêu cầu Sass xem các tệp nguồn của bạn để biết các thay đổi và biên dịch lại CSS mỗi khi bạn lưu Sass của mình
Nếu bạn muốn xem (thay vì xây dựng thủ công) tệp input.scss của mình, bạn chỉ cần thêm cờ xem vào lệnh của mình, như vậy:
sass --watch input.scss output.css
Bạn có thể xem và xuất ra các thư mục bằng cách sử dụng đường dẫn thư mục làm đầu vào và đầu ra của bạn và phân tách chúng bằng dấu hai chấm.
Trong ví dụ này:
sass --watch app/sass:public/stylesheets
Sass sẽ xem tất cả các tệp trong thư mục app/sass để thay đổi và biên dịch CSS sang thư mục public/stylesheets
Nguồn sass-lang.com