Tập tành sắp xếp SCSS trong Laravel

Trong bài viết này mình sẽ chia sẻ về cách sắp xếp và viết SCSS sao cho đẹp mắt, và để mọi người dễ review

1. Cấu trúc folder SASS

_base.scss: Nơi chưa tất cả biến, mixins, resets, typography hay các lớp tính năng (utility classes) cho web của bạn. Bạn có thể hiểu đơn giản ở đây sẽ chứa code mỗi khi bạn bắt đầu một dự án mới.

_app.scss: là nơi để import các file scss

Lưu ý: Nên chia scss thành những file theo chức năng để có thể dễ tìm, sửa chữa và review

2. Sắp xếp sao cho ngăn nắp

Thông thường khi làm việc với SASS, bạn sẽ include, extend... Vì vậy chúng ta nên để extend luôn đặt trên cùng > properties ở những line tiếp theo và > sau đó đến include.

3. Một số lưu ý khi viết SCSS

• Để các biến mầu và phông chữ trong variables.scss

• SCSS selector tối đa 3 lever

Tốt:

• Giữa các selector phải có khoảng trống

Tốt

• Ccho html, body đầu tiên

• Kích thước font-size ở các Selector nên dùng "rem" thay vì "px", line-height nên dùng "calc" thay vì "px"

.section-title {
  font-family: 'Roboto-bold';
  font-style: normal;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: calc(14 / 12);
  color: $neutral-dark;
}

Lợi ích của việc viết kích thước của font-size bằng "rem" thay vì "px" giúp code của chúng ta dễ bảo trì và sửa đổi, khi khách hàng yêu cầu chỉnh đổi kích thước chữ ta chỉ cần chỉnh sửa font-size ở phần html, body thì các font-size ở các selector bên trong sẽ tự động thay đổi theo thay vì chúng ta phải đi chỉnh font-size của từng selector một. Dùng calc trong line-height giúp mọi người review code dễ hơn và có thể biết được mình đang viết đúng hay sai.

4. Kết luận

Trên đây là một vài chia sẻ của mình về kinh nghiệm xây dựng dự án với SASS. Hãy tạo cho mình một bộ source thật bài bản. Chúc các bạn có một source code "sạch sẽ" và review những dòng code của người khác thật dễ nhìn