Viết media queries sử dụng sass

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-awidth: 768px) and (max-awidth: 1023px) {
  h2 {
    font-size: 18px;
  }
}

@media (min-awidth: 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-awidth, lúc max-awidth… 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-awidth: 768px) and (max-awidth: 1023px)";
$desktop: "(min-awidth: 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-awidth: 768px) and (max-awidth: 1023px)";
$desktop: "(min-awidth: 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-awidth: 768px;
$desktop-awidth: 1024px;

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

@mixin desktop {
  @media (min-awidth: #{$desktop-awidth}) {
    @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/