Viết media queries sử dụng sass
CSS3
24
Sass
6
White

Lê Anh viết ngày 25/12/2015

Chắc hẳn bạn đã từng phát ngấy khi viết media queries trong css theo kiểu này

h2 {
  font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  h2 {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  h2 {
    font-size: 20px;
  }
}

Hãy thử tưởng tượng mà xem, website của bạn thì có vô vàn chỗ cần sử dụng media queries rồi là hàng tá các con số, độ phân giải cần phải nhớ phải viết, lúc min-width, lúc max-width… nói chung là điên cái đầu. Vào một ngày nọ bạn nghe nói đâu đó rằng sử dụng sass sẽ ngắn gọn & dễ bào trì hơn. Sau một hồi mày mò tìm hiểu thì cuối cùng bạn cũng làm được như sau

$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";

h2 {
  font-size: 16px;
}

@media #{$tablet} {
  h2 {
    font-size: 18px;
  }
}

@media #{$desktop} {
  h2 {
    font-size: 20px;
  }
}

Thấy vẫn chưa ưng ý lắm, bạn tiếp tục ngồi học thêm về sass và thấy có thể áp dụng quy tắc lồng vào đây

$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";

h2 {
  font-size: 16px;

  @media #{$tablet} {
    font-size: 18px;
  }

  @media #{$desktop} {
    font-size: 20px;
  }
}

Lần này thì quá chuẩn rồi, code đã ngắn đi nhiều rồi. Bạn tự hào ngồi ngắm nghía thành quả của mình. Thằng bạn lúc này đi qua, hắn nhìn vào màn hình bạn và thốt lên “Bộ mày mới học sass hả, viết sass ai viết kiểu này, phải viết như tao này”. Rồi hắn sửa đoạn code của bạn thành như dưới đây :

Đầu tiên là phải khai báo mixin

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

Sau đó đơn giản chỉ là sử dụng mixin thôi, đơn giản & ngắn gọn vãi, hắn tặc lưỡi

h2 {
  font-size: 16px;

  @include tablet {
    font-size: 18px;
  }

  @include desktop {
    font-size: 20px;
  }
}

Ôi định mệnh, hình như hôm nay hắn thông minh đột xuất. Chốt lại là hôm này học sass đến đây thôi
Nguồn : http://apollo13.vn/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lê Anh

4 bài viết.
5 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
8 2
Về cơ bản có 3 phương pháp review code là review chéo (giữa 2 lập trình viên với nhau), cả team ngồi họp cùng review và cuối cùng là technical lead...
Lê Anh viết hơn 2 năm trước
8 2
White
8 0
1. Viết code trước Những người mới bắt tay vào làm TDD thường mắc phải 1 sai lầm cơ bản đó là viết code trước sau đó mới viết test. Khi được hỏi là...
Lê Anh viết 2 năm trước
8 0
White
3 0
Trước đây mình có một bài viết về phương pháp (Link). Hôm nay mình sẽ giới thiệu với các bạn một phương pháp khác là startfish, tạm dịch là sao biể...
Lê Anh viết 2 năm trước
3 0
Bài viết liên quan
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
White
16 9
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
16 9
White
5 0
FOUT FOUT là viết tắt của "flash of unstyled text", là hiện tượng xảy ra ở Firefox/Opera khi dùng @fontface trong CSS. Firefox hay Opera nếu chưa...
Vu Nhat Minh viết gần 3 năm trước
5 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
5 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!