Chào các bạn đến với Lession 5 của Wolfactive tụi mình. Ở lession 5, tụi mình sẽ viết về Media Query trong Scss và cách các bạn sử dụng chúng sao cho thuận tiện nhất. Giờ ta bắt dầu nhé.
1/ @media trong Css
Như các bạn cũng đã biết,Media Query trong CSS sẽ dùng @media thường được dùng để responsive. Thông thường nó sẽ đi với cú pháp: @media screen and (max-width (hoặc min-width): … ). Nhờ nó mà các bạn sẽ có thể reponsive tùy ý. Tuy nhiên nó lại phức tạp ở chỗ là các bạn không thể viết lồng tại vị trí đó trong file Css được. Nó bắt buộc bạn phải viết riêng biệt và điền class,id, style của bạn ở bên trong nó. Vậy trong Scss thì như thế nào?
2/ @media trong Scss
Media Query trong Scss, các bạn có thể viết lồng tại vị trí mà bạn muốn thêm thuộc tính reponsive vào mà không cần phải viết bên ngoài như trong CSS. Tuy nhiên mình sẽ chỉ các bạn cách sử dụng sao cho hữu dụng nhất.
Các bạn còn nhớ ở lession 2 Variables trong Scss chứ? Bây giờ mình sẽ tạo 4 biến như sau và lưu nó vào một file tên _variables.scss chẳng hạn. Và mình sẽ đặt nó lên vị trí đầu tiên đề import vào.
$desktop:1280px;
$lg:1024px;
$md:768px;
$sm:568px;Ở đây mỗi biến tượng trưng cho width ở từng khung hình responsive. Sau đó mình tiếp tục tạo một file _mixins.scss và trong đó mình sẽ viết mixin Media Query cho responsive và mình sẽ import file này ở dòng 2 sau variabies..
@mixin MediaQuery($type){
@media screen and (max-width:$type){
@content;
}
}Ở đây mình tạo một mixin với tên MediaQuery ($type) với type là param bạn sẽ truyền vào. Kèm bên cạnh đó là @content tức là nội dung responsive của bạn. Chưa kể các biến mình tạo trong variables để cho mình có thể tái sử dụng nhiều lần và tiết kiệm thời gian nhất có thể. Như vậy khi responsive bạn chỉ cần khai báo như sau:
#footer {
@include MediaQuery($lg){
background:#333;
}
}