CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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

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 freetuts 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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top