Responsive và css style cho trang web chưa bao giờ đơn giản đến thế với scss và tailwind

Tram Ho

1. Mở đầu:

có lẽ bạn quá mệt mỏi với việc mỗi lần code responsive

Thật sự là một trải nhiệm tồi tệ với việc sáng tạo mà (tức). Đây là một trong những lỹ do các bạn lên chuyển qua sử dụng tailwind và tương tư như những người anh đi trước, như bootraps, foundation vv… thì tailwind cũng có các thuộc tính được gán thành những class riêng. Vậy tại sao chúng ta lên sử dụng tailwind thay vì bootraps. Như ban đầu mình đã giới thiệu thì tailwind hỗ trợ responsive vô cùng hiệu quả và dễ dàng. Kèm với đó là một số điểm mình rất gét của bootrap là javascript của nó, đi kèm với đó là cách import của nó vào project của mình với các phiên bản khác nhau cũng khiến mình rất khó chịu (đây là chia sẻ cá nhân, các bạn có thể tham khảo). nói chung là bootrap nó rất thuận tiện nhưng nó đang xử lý rất nhiều mảng không chỉ css và mình cảm thấy hơi khó chịu với việc custorm nó, thay vào đó mình thấy điểm thuận tiện đó ở tailwind.

2. tailwind

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

Tailwind không giống như các framework khác, nó không phải là một UI kit với những components xây dựng sẵn, thực tế là nó chẳng có components nào cả, cũng không có một default theme luôn. Có nghĩa là nếu bạn cần một navbar giống foundation hay bootstrap thì sẽ không có. Nhưng như đó là một trong những thứ mình thấy là rất tốt ở tailwind bạn có thể xây dụng lên một theme của theo phong cách của mình và chắc chắn không đụng hà (yaomi)

3. Cài đặt tailwind

Sử dụng command để install tailwind

Import css của Tailwind:

Add vào css của bạn:

Nếu bạn muốn tạo ra các config riêng cho dự án của mình, thì bạn có thể tạo ra file config file của tailwind bằng lệnh

nó sẽ tạo ra file config tailwind.config.js trong project của bạn

nó sẽ có cấu trúc như sau:

ví dụ như mình có thể custorm thành:

còn một thứ rất gì và này lọ các bạn có thể tìm hiểu thêm ở trong document của nó: https://tailwindcss.com/docs/installation

4. Ví dụ:

Các bạn có thể để ý thấy những trường như: px (padding căn left right), py(padding căn bottom top) … đây là các thuộc tính class cơ bản class built-in rồi, nhưng các bạn có thể thấy sẽ có thêm các trường như md, lg, sm … nó sẽ tương đương với kích thước các màn mà chúng ta đã config ở trên, và nó cũng có defaul sẵn cho các bạn các trường cơ bản rồi :v.

kết hợp chúng một chút nhé, mình có đoạn md:hidden lg:block tức là đoạn text ở rưới sẽ ẩn khi bạn ở dưới kích thước màn md, và hiện thị khi ở kích thước màn lg. Và còn rất nhiều cái hay ho nữa nhưng một bài viết là khó có thể nói hết được, lên các bạn hãy tự tìm hiểu thêm nhé, nếu có gì đó hay ho các bạn có thể thêm ở phần bình luận để mọi người cùng tham khảo nha (yaomi)

5. SCSS

Dù các framework có thần thánh đến mức nào, hay support tốt đến đâu thì chúng ta vẫn phải custorm, ghi đè, hay thậm chí tự viết một số đoạn, lên mình sẽ giới thiệu đến các bạn một trong các framework hỗ trợ viết css thuần rất hay đó là scss.

vậy scss là gì:

SCSS: là một CSS Prepocessor – giúp cho việc viết code CSS nhanh hơn và cấu trúc rõ ràng hơn, quản lý các biến đã định nghĩa sẵn.
Để cài đặt các bạn có thể chạy command:

Cài đặt

command install

Để biên dịch code SCSS sang CSS thì ta truy cập vào thư mục chứa file SCSS sau đó chạy lệnh:

Các cú pháp cơ bản về scss

Lấy theo ví dụ trên thì các bạn có thể viết css lại đợn giải như sau

1. Nested Rules trong Scss

Referencing Parent trong Scss

Giúp tham chiều đến phần tử cha: cú pháp là & với class hoặc # nếu là id

Ví dụ mình sẽ có 1 div nữa với class là: product-developmenttitle__title

hay như thể &:hover

Variables trong Scss

Các bạn có thể đặt lại thành tên các biến với cú pháp: $variales: value;

ví dụ mình thường đặt các mầu trong project vào một file, và import ở những chỗ có sư dụng. Cách này rất hay khi các bạn có thể thay đổi theame cho cả dự án rất hay 😃

Kế thừa extend trong Scss

và các bạn có thể import các file với nhau để dễ dàng extend @import ‘Link của bạn

Kết luận

Bài viết cũng đã khá dài rồi lên mình xin phép tạm kết ở đây nếu các bạn có thắc mắc gì đừng ngại commend ở bên rưới nhé. Và để cho mình thêm động lực đừng quên để lại một upvote nhé (thankyou)

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo