Bài 05: Cách viết Responsive với SASS CSS - CSS Responsive Web Design

SASS là một bộ thư viện dùng để biên dịch từ mã SASS sang mã CSS, hay nó còn có một cái tên khác đó là CSS Compiler. Việc sử dụng SASS để viết CSS sẽ mang đến hiệu quả khá cao, dễ dàng nâng cấp và bảo trì. Đi kèm với SASS thì ta thêm một thư viện nữa đó là LESS, tuy nhiên hiện tại mình thấy Bootstrap 4 đang sử dung SASS nên tương lai có lẽ người ta vẫn thích SASS hơn. Hiện tại trên Zaidap.com có một series học SASS, bạn có thể đến đó và tìm hiểu nó trước khi xem bài này nhé.

1. Cách phân chia từng khoảng với Mixin

Mixin trong SASS không còn xa lạ nữa phải không nào :) nó có chức năng tương tự như function trong PHP vậy, nghĩa là ta có thể tạo ra những nhóm code để thực hiện một nhiệm vụ nào đó. Ngoài Mixin ra thì trong bài này chúng ta cũng sẽ sử dụng khai báo biến trong SASS nữa.

Và sau đây mình sẽ đưa ra một ý tưởng để ta sử dụng SASS phân chia thành từng khoảng của Responsive. Trước tiên ta xét các khoảng ở firebug của Chrome thì sẽ có một số khoảng như sau:

• 320px - 374px
• 375px - 424px
• 425px - 767px
• 768px - 991px
• 992px - 1023px
• 1024px - 1999px
• 1200px - ...

Như vậy đay là 7 khoảng mà thông thường chúng ta hay sử dụng để lập trình Responsive. Để tiện cho việc quản lý thì chúng ta sẽ định nghĩa ra 7 biến dùng để lưu trữ 7 khoảng đó, đồng thời khai báo thêm 7 Mixin để sau này muốn sử dụng khoảng nào thì chỉ việc gọi ra là được.

$res_320 : "only screen and (min-width: 320px) and (max-width: 374px)";
$res_375 : "only screen and (min-width: 375px) and (max-width: 424px)";
$res_425 : "only screen and (min-width: 425px) and (max-width: 767px)";
$res_768 : "only screen and (min-width: 768px) and (max-width: 991px)";
$res_992 : "only screen and (min-width: 992px) and (max-width: 1023px)";
$res_1024 : "only screen and (min-width: 1024px) and (max-width: 1999px)";
$res_1200 : "only screen and (min-width: 1200px)";

@mixin responsive_320() {
    @media #{$res_320} {
        @content;
    }
}
@mixin responsive_375() {
    @media #{$res_375} {
        @content;
    }
}
@mixin responsive_425() {
    @media #{$res_425} {
        @content;
    }
}
@mixin responsive_768() {
    @media #{$res_768} {
        @content;
    }
}
@mixin responsive_992() {
    @media #{$res_992} {
        @content;
    }
}
@mixin responsive_1024() {
    @media #{$res_1024} {
        @content;
    }
}
@mixin responsive_1200() {
    @media #{$res_1200} {
        @content;
    }
}

Như vậy sau này bạn chỉ việc sử dụng cú pháp như sau để code cho từng khoảng:

@include responsive_320{

}

@include responsive_375{

}

@include responsive_425{

}

@include responsive_768{

}

@include responsive_992{

}

@include responsive_1024{

}

@include responsive_1200{

}

2. Sử dụng SASS làm Responsive

Quay lại ví dụ ở bài 4 thì mình sẽ viết SASS như sau:

@include responsive_320{
    .container{
        margin: 0px 10px;
    }


    .content, .sidebar{
        float:none;
        width: 100%;
    }
}

@include responsive_375{
    .container{
        margin: 0px 10px;
    }

    .content, .sidebar{
        float:none;
        width: 100%;
    }
}

@include responsive_425{
    .container{
        margin: 0px 10px;
    }

    .content, .sidebar{
        float:none;
        width: 100%;
    }
}

@include responsive_768{
    .container{
        margin: 0px 10px;
    }

}

@include responsive_992{
    .container{
        margin: 0px 10px;
    }

}

@include responsive_1024{
    .container{
        margin: 0px 10px;
    }

}

@include responsive_1200{
    .container{
        margin: 0px 10px;
    }
}

Về lợi ích khi viết cách này thì như sau: Nếu viết cách thông thường thì khi ta cần sửa một khoảng nào đó thì bắt buộc phải lặp và tìm tất cả các file CSS để thay đổi code, nhưng với cách này thì ta chỉ thay đổi ở một file thư viện Mixin thôi.

3. Lời kết

Các khoảng Responsive ở trên mình chỉ đưa ra mang tính tham khảo, trong thực tế thì bạn có thể tạo ra bao nhiêu khoảng thì tùy bạn, miễn sao trang web chạy mượt mà là được rồi. Tuy nhiên khi chia khoảng thì bạn cũng nên tìm hiểu kích thước màn hình ở các thiết bị để từ đó đưa ra các khoảng phù hợp nhằm tối ưu code hơn.

Bài này chỉ dành cho những bạn đã có kiến thức về SASS, còn những bạn không sử dụng SASS thì mình khuyên bạn nên tìm hiểu nó vì đây là một bộ thư viện CSS Compiler rất hay, hầu hết các nhà tuyển dụng đều thích lập trình viên sử dụng SASS để viết CSS.