Chào mừng các bạn đến với lession 3 của series Scss của WolfActive tụi mình. Ở những lession trước, tụi mình đã học và biết được về kiến thức cơ bản của Scss, biến trong Scss. Thì ở lession 3 chúng ta sẽ học về kỹ thuật partial trong Scss.
1/ Partial là gì?
Vậy tại sao chúng ta cần phải biết đến kỹ thuật này? Như các bạn biết, nếu các bạn muốn cải thiện tốc độ của website, các bạn thường chỉ viết trong từ 1 đến vài file css. Chưa kể trong từng file đó chứa hàng nghìn dòng css. Sau đó các bạn sẽ gọi những file đó vào thẻ head trong html. Chính điều đó sẽ dẫn các bạn gặp những trường hợp sau: tìm code fix sml luôn 🙂 => Khó bảo trì, chỉnh sửa, Code nhìn không được đẹp.
Thì đến với Partial trong Scss ( cho mình xin phép được gọi là chia file nhé). Các bạn có thể tạo nhiều file tùy ý và gọi file trong đúng một file scss. Sau đó các bạn chỉ việc gọi mỗi file đó vào trong thẻ head thôi. Partial sẽ giúp các bạn dễ dàng quản lí code, dễ chỉnh sữa, code đẹp hơn, cải thiện performance của website đi rất nhiều.
2/ Sử dụng partial
Các bạn có thể xem source tree của mình ở hình sau:
Như các bạn thấy, ở đây mình có chia thành nhiều file như mixin,varialbles, active .scss. Mỗi file đều sẽ có style từng phần khác nhau, chứa các biến và mixin,… thì sau khi tạo các bạn cần import vào một file tổng. Như của mình thì sẽ là main.scss bằng dòng sau:
3/ Import:
@import "./helper/mixin";Tương tự như vậy mình sẽ có các dòng sau:
@import "./helper/variables";
@import "./active";Ở đây chắc chắn các bạn sẽ thắc mắc tại sao tên file của mình lại có dấu “_” nhỉ? Và giữa có dấu và không dấu thì khác nhau như thế nào? Vậy thì mình sẽ giải thích cho các bạn hiểu.
Về cách đặt tên thì giống nhau cả không sai. Tuy nhiên nếu các bạn ký hiệu có dấu “_” ở đầu tên file, thì khi complie ra hệ thống sẽ tự hiểu là những file này sẽ được import vào file nào đó và sẽ không complie file từ Scss thành Css. Ngược lại nếu các bạn không ký hiệu nó, thì khi complie nó sẽ tạo ra file css.
Ngoài ra, các bạn có thể import các đường dẫn url như url của font-family mà các bạn lấy từ google-font chẳng hạn
@import url('...');4/ Tổng kết
Như vậy mình đã hướng dẫn cho các bạn và chỉ cho các bạn biết thêm về ý nghĩa cách đặt tên file Scss. Cách import, partial file Scss. Ở lession kế mình sẽ chỉ cho các bạn về Mixin trong Scss. Mọi thắc mắc các bạn cứ liên hệ về fanpage của tụi mình nhé https://www.facebook.com/Wolfactiveweb.design.SEO
| Bài trước: Lession 2 – Biến (variables) trong Scss | Bài kế: Lession 4 – Mixin |