Sử dụng SASS để viết Media Queries

Xin chào cả nhà, chúng ta lại gặp nhau trong một bài viết mới của tôi. Như các bạn đã biết khi làm web, điều chú ta cần đặc biết chú ý về mặt giao diện đó là khả năng responsive của nó. Hiện nay thì framework bootstrap đã hỗ trợ cho ta rất tốt về việc này, trong phiên bản bootstrap 4 mới nhất, còn hỗ trợ cả Flex, khiến cho việc làm website có khả năng responsie chưa bao giờ dễ dàng như thế. Xong có một vài thuộc tính đôi khi chúng ta cần phải tự điều chỉnh ví dụ như trên bản PC, thành phần này được căn cách bên trái một khoảng là 30px nhưng trên mobile để tiết kiệm diện tích thì chúng ta sẽ phải điều chỉnh lại chút là cho thành phần đó chỉ cách trái một khoảng 5px thôi chẳng hạn, hoặc có những chỗ trên pc, text có font-size là 30px nhưng trên mobile chúng ta chỉ muốn hiện thị nó vs kích thước nhỏ hơn là font-size 20px. Thì tất cả những việc cần thay đổi qua lại phụ thuộc vào độ phân giải màn hình như vậy chúng ta sẽ dùng đến Media queries của CSS3.

Chúng ta thường hay tạo ra 1 file gọi là responive.css hay small-device.css sau đó chúng ta khai báo Media querries ở hết trong file này, cứ thành phàn nào của html cần điều chỉnh, thay đổi ở độ phân giải màn hình nào cũng khai báo hết vào đó

/* responsive.css */

@media all and (max-awidth: 1024px) {
  ....
}
@media all and (max-awidth: 768px) {
  .content {
    margin-top: 15px;
  }
  p {
    font-size: 15px;
  }
}
@media all and ( max-awidth: 480px) {
 ...
}

Với cách làm như trên nó sẽ dẫn đến việc đó là file này dần dần sẽ trở nên rất to và nhiều code lộn xộn của nhiều thành phần html cần thay đổi. Cứ mỗi lần có Element nào cần thay đổi hoặc ta cần kiểm tra lại thì lại mất công vào file này do xem, như vậy rất khó kiểm soát. Vậy hôm nay trong bài viết này mình sẽ đưa ra một cách viết Media Queries tốt hơn bằng cách sử dụng SASS như sau:

• Sử dụng Mixin của SASS để khai báo với từng độ phân giari màn hình
• Element nào cần thay đổi ở độ phân giải màn hình nào thì ta chỉ việc gọi mixin tương ứng ra và sử dụng cấu trúc lồng viết luôn thuộc tính cần thay đổi tại đó

/* Mixin */
/* Set các giá trị với màn hình tương ứng */
$mobile-awidth: 480px; 
$tablet-awidth: 768px; 
$desktop-awidth: 1024px;  

@mixin mobile { @media (max-awidth: #{$mobile -awidth - 1px}) {     
  @content;   
 } 
}  

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

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

Sau khi có các mixins này rồi thì ở mỗi file scss, element nào cần thay đổi gì chỉ việc gọi vào và viết trực tiếp luôn như sau: Ví dụ như ta muốn thay đổi thuộc tính của thẻ p, bình thường font-size là 14px nhưng trên mobile ta chỉ muốn nó hiện thị 12px:

/* sử dụng ở các elements có sự thay đổi */

p {   
 font-size: 14px;    
 @include mobile {     
  font-size: 12px;   
 }    
 @include table {     
  font-size: 13px;   
 } 
}

Với việc sử dụng mixin, chúng ta sẽ không cần phải viết lại các media queries, mặc khác chúng ta có thể theo dõi đc sự thay đổi của mỗi thành phần tương ứng vs các độ phân giải màn hình, không phải vào tìm trong file responsive.css như trước kia. Ngoài ra có thêm một cách viết nữa như sau:

// Khai báo kích thước tương ứng với màn hình thiết bị
   
$XS:     480px;   
$SM:     768px;  
$MD:    1024px;   
$XL:   1170px;     

// media queries

@mixin Responsive($canvas) {
  @if $canvas == XS {
   @media only screen and (min-awidth: $XS) { @content; } 
  }
  @else if $canvas == SM {
   @media only screen and (min-awidth: $SM) { @content; } 
  }
  @else if $canvas == MD {
   @media only screen and (min-awidth: $MD) { @content; } 
  }
  @else if $canvas == XL {
   @media only screen and (min-awidth: $XL) { @content; } 
  }
}

Và khi có file ở trên chúng ta sẽ sử dụng bằng cách gọi chúng ra như sau:

.main {
	@include Responsive(MD) {
		// Code here
	}
	@include Responsive(XL) {
		/// Code here
	}
}

Mình xin kết thúc bài viết tại đây, hy vọng bài viết sẽ đem đến cho các bạn thông tin hữu ích. Cảm ơn các bạn nhé đã theo dõi bài viết của mình nhé, hy vọng bài viết sẽ hữu ích cho cả nhà.