Những Mixins SCSS hữu ích khi code Front-end

Tram Ho

Hello các bạn, như trên tiêu đề, mình sẽ giới thiệu các bạn những mixins mà mình cũng như các dev Front-end khác hay dùng nhất trong một dự án.

Có rất nhiều nơi recommend các mixin để giải quyết vấn đề prefix cho trình duyệt cũ, nhưng cá nhân mình thấy nó hơi thừa, vì ngày nay chúng ta thường dùng PostCSS hoặc Autoprefixer để tự thêm chúng rồi.
Vậy nên mình sẽ không nhắc tới các mixin kiểu như vậy nữa.

Ok, dài dòng vậy đủ rồi, mình sẽ vào vấn đề chính luôn 😀

1. Responsive

Đây là mixin dùng nhiều nhất với mình, dùng để code responsive trang web (Mobile first nhé).

Ở đây mình chia theo các mốc lưới của Bootstrap 4, lần lượt là 320, 576, 768, 992, 1200 và có cải tiến thêm mốc 1600 dành cho các bản thiết kế lớn hơn. Cách dùng:

Cũng khá đơn giản đúng không 😀 giờ mình sẽ chỉ thêm cái quan trọng thứ 2 mà gần như dự án nào cũng dùng

2. Gutter (Chỉ áp dụng cho dự án dùng Bootstrap)

Đây là code để các bạn điều chỉnh khoảng cách giữa các column trong Bootstrap. Giả sử bạn có 1 row sản phẩm gồm 4 sản phẩm. Mặc định bootstrap là cách 30px giữa các sản phẩm. Nếu bạn muốn cách 50px thì sao? Tất nhiên bạn có thể customize trong core của bootstrap, nhưng như vậy sẽ ảnh hưởng toàn bộ hệ thống Grid mà trong khi bạn chỉ muốn cái row này cách 50px mà thôi. Vậy nên ta sẽ cần cái mixin này:

Cách dùng như sau: Giả sử bạn muốn cách 50px, ta sẽ khai báo class trong scss để tái sử dụng được nhiều nơi.

SCSS

HTML

Lưu ý: Có thể các bạn sẽ thắc mắc tại sao mixin của mình lại có đoạn @if và @else trông có vẻ thừa kia. Lý do là vì nếu bạn báo gutter lớn hơn 30 thì khi xuống màn hình mobile, tổng padding 2 bên trái phải của column sẽ lớn hơn mặc định của container bootstrap (30px) dẫn đến sinh thanh cuộn ngang làm mất thẩm mỹ responsive, vậy nên, với những gutter > 30px ta chỉ áp dụng với màn hình cỡ lớn

3. Placeholder

Đây là code để ta có thể tùy biến placeholder của input. Lưu ý đoạn code này chỉ áp dụng cho SCSS bản 3.4 đổ đi

Cách dùng:

Kết quả:

4. Gradient

Đây là mixin để thêm background gradient cho DOM. Ta có $start-color: màu bắt đầu, $end-color: màu kết thúc, $orientation: Chiều của gradient.
Orientation có thể là vertical (dọc), horizontal ( ngang) hoặc không để gì thì sẽ là Gradient hình tròn.

Cách dùng:

Oke, vậy là trên đây mình đã giới thiệu 4 Mixins mà mình thấy dự án nào mình cũng cần dùng rồi. Cảm ơn các bạn đã đọc, nếu có mixins nào hữu ích nữa, các bạn có thể comment cho mình biết với nha 😀

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo