Tổ chức dự án SASS

Sử dụng @import

Giống như CSS nếu bạn có một file code SCSS có tên /lib/file.scss thì có thể nạp nội dung của nó vào file scss hiện tại bằng @import

@import '/lib/file.scss'

Bằng cách đó bạn có thể phân chia dự án SCSS thành các file nhỏ, mỗi file chứa một module chức năng nào đó, sau đó tổng hợp lại trong một file SCSS chính.

Lưu ý rằng, các file nhỏ SCSS thông thường trong dự án, nếu đưa vào các trình giám sát thay đổi và tự động dịch SCSS thành CSS như Koala thì các file nhỏ đó cũng được dịch thành CSS như file chính.

Nhiều trường hợp file nhỏ chỉ là một phần của file chính, nó không thể hoạt động đúng nếu sử dụng độc lập, lúc này biên dịch có thể dẫn tới lỗi. Trong trường hợp như vậy hãy đặt tên file với ký tự đầu tiên là _ để đảm bảo file đó không được dịch (nó chỉ được import vào file khác).

Ví dụ có file /lib/_lib1.scss thì file này sẽ không tự động dịch thành SCSS mà chỉ sử dụng để import vào các file khác, vẫn theo cú pháp @import '/lib/lib1'

Tổ chức các file dự án SCSS

Để dễ quản lý dự án, hãy cố gắng chia nhỏ chức năng, mục đích, ý nghĩa thành các file một cách hợp lý. Ví dụ như gợi ý sau:

Phân chia thư mục

Có thể gom các file thành các phần như các thư viện trong thư mục /lib, các file thành phần chức năng chuyên biệt trong thư mục /components, các kết quả chính tại /views ...

/libs
/components
/views

Thư mục /libs

Lưu các scss sử dụng xuyên suốt dự án, ví dụ

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

Thư mục /components

Lưu trữ các thành phần giao diện SCSS cơ bản, ví dụ

/components/base/_nav.scss       //Lưu hệ SCSS điều hướng như menu, navbar ...
/components/base/_buttons.scss   //Xây dựng nút bấm
/components/base/_type.scss      //Kiểu chữ, font chữ ...
/components/layout/_header.scss  //Header
/components/layout/_footer.scss  //Footer
/components/theme/_palette.scss  //Màu

Thư mục /views

Chứa kết quả tổng hợp, ví dụ:

/views/core.scss       //Sử dụng chung
/views/tablet.scss     //Dành cho tablet
/views/desktop.scss    //Dành cho desktop

Các chú thích SCSS

Chú thích là các dòng text không ảnh hưởng đến code SCSS, có hai loại: chú thích trên một dòng // chú thích và chú thích nhiều dòng /* chú thích */

//đây là chú thích trên một dòng

/* Đây là
   chú thích
   nhiều dòng
*/

Sử dụng Media query - @media trong SCSS

Như đã biết trong CSS, @media được sử dụng để truy vấn để biết những kiểu thiết bị khác nhau, với mỗi kiểu thiết bị truy vấn được sẽ áp dụng code CSS phù hợp.

Các truy vấn đến Media nó có thể kiểm tra những tiêu chí:

• Chiều rộng và chiều cao của khung nhìn (viewport - cửa sổ trình duyệt)
• Chiều rộng và chiều cao màn hình thiết bị
• Hướng xoay màn hình (ngang, đứng)
• Độ phân giải màn hình

Cú pháp sử dụng @media

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
    Mã CSS tương ứng;
}

• mediatype thay bằng các giá trị: mặc địch không khai báo thì nó bằng all (tất cả các thiết bị media), print sử dụng cho máy in, screen sử dụng cho màn hình
• mediafeature thay bằng các giá trị:
  • max-height: #px chiều cao hiện thị lớn nhất - ví dụ max-height: 600px chiều cao lớn nhất là 600px
  • max-width: #px chiều rộng hiện thị lớn nhất - ví dụ max-width: 1600px chiều rộng lớn nhất là 1600px
  • min-height: #px chiều cao hiện thị nhỏ nhất - ví dụ min-height: 500px chiều cao nhỏ nhất là 500px
  • min-width: #px chiều rộng hiện thị nhỏ nhất - ví dụ min-width: 900px chiều rộng nhỏ nhất là 900px
  • orientation: landscape màn hình ngang, orientation: portrait màn hình đứng
• Nếu có từ khóa not nó mang ý nghĩa phủ định
• Nếu có từ khóa and mang ý nghĩa kết hợp

Từ đó xây dựng nên nhiều @media phức tạp

Ví dụ

@media (max-width: 12450px) {
    //CSS dành cho mà hình rộng nhất 12450px
}

@media (min-width: 30em) and (orientation: landscape) {
    //CSS dành cho mà hình từ 30em
    //trở đi, hướng màn hình ngang
}

@media (min-width: 30em) and (orientation: landscape) {
    //CSS dành cho mà hình từ 30em
    //trở đi, hướng màn hình ngang
}

@media screen
    and (min-width: 1200px)
    and (max-width: 1600px)
    {
        //màn hình rộng từ 1200px đến 1600px
    }

Khi áp dụng @media cho SCSS

//SCSS
.aside {
    width: 100%;
    @media screen and (min-width: 800px) {
        float: right;
        width: 35%;
    }
}

//CSS
.aside {
  width: 100%; }
  @media screen and (min-width: 800px) {
    .aside {
      float: right;
      width: 35%; } }

Tham khảo các hàm xây dựng sẵn trong SASS

Các hàm xây dựng sẵn