hướng dẫn sử dụng sass nâng cao

Sử dụng SASS nâng cao – @for – @if – @each5 phút đọc

Chào mừng bạn đến với trùm cuối của serie bài viết học và sử dụng SASS toàn tập : sử dụng SASS nâng cao với @for, @if và @each.

Ở những bài viết trước trong serie này mình đã giới thiệu đến các bạn những khái niệm cơ bản nhất cùng những ví dụ cụ thể về SASS.Qua các bài viết đó mình tin nếu bạn chăm chỉ luyện tập bạn sẽ có đủ kiến thức để viết CSS sử dụng SASS trong những dự án vừa và nhỏ.

Còn để làm những dự án lớn hơn, phức tạp hơn đòi hỏi bạn phải sử dụng những kiến thức chuyên sâu hơn và luyện tập thành thạo chúng.Bài viết này sẽ hướng dẫn bạn sử dụng SASS nâng cao bằng cách áp dụng @for, @if và @each.

Có nên học sử dụng SASS nâng cao ?

Có thể dự án bạn đang làm và công ty bạn cũng không đòi hỏi phải sử dụng SASS nâng cao nhưng theo quan điểm cá nhân mình thì bạn vẫn nên học qua để biết kiến thức nâng cao gồm có gì.Sau này nếu có gặp trong thực tế thì cũng không bỡ ngỡ.

Những kiến thức trong bài sử dụng SASS nâng cao này khá ít dùng trong thực tế đặc biệt là những dự án vừa và nhỏ.Trước khi học bài này bạn nên thực sự thành thạo những kiến thức cơ bản về SASS mà mình đã chia sẻ trong những bài viết trước.

Vòng lặp @for

Với những bạn nào đã từng học qua các ngôn ngữ lập trình như Javascript, PHP …vv chắc không còn xa lạ gì với vòng lặp for thần thánh.

Vòng lặp for giúp chúng ta lặp đi lặp lại một xử lý nào đó theo điều kiện đã được thiết lập.Khi viết SASS trong những dự án lớn bạn sẽ thường xuyên dùng đến vòng lặp for này.

SASS

Trên đây là ví dụ sử dụng vòng lặp for để in ra background-image tương ứng với từng class có sẵn.$i đại diện cho số thứ tự và dấu # cần thêm vào trước {$i} để khi biên dịch ra kết quả sẽ hiển thị đúng.

Sau khi biên dịch ra CSS chúng ta sẽ có kết quả như dưới đây.

CSS

Bạn có thể thấy rằng thay vì phải viết rất nhiều code có cấu trúc khá giống nhau thì khi sử dụng vòng lặp for chúng ta chỉ phải viết vài dòng code đơn giản.Hơn nữa sẽ rất tiện cho việc quản lý cũng như thêm bớt code sau này.

Câu điều kiện @if

Ngoài vòng lặp for ra thì câu điều kiện if cũng là một vũ khí lợi hại của SASS.Nếu sử dụng thành thạo nó chắc chắn việc viết code của bạn sẽ linh hoạt hơn rất nhiều.

Dưới đây là một ví dụ đơn giản chỉ dùng để minh họa cho các bạn chứ trong thực tế sẽ phức tạp và khó hơn nhiều.

SASS

Đối với giá trị $type truyền vào khác nhau chúng ta sẽ có những giá trị màu background khác nhau cho class .button.Nếu giá trị $type là main thì màu red, nếu $type là sub thì màu blue, cuối cùng nếu không trường hợp nào đúng thì lấy giá trị màu gray.

Sau khi biên dịch ra CSS ta sẽ có kết quả như dưới đây.

CSS

Do giá trị $type truyền vào là sub nên màu tương ứng sẽ là mày blue, đúng như ý đồ đoạn code ở trên.

Kiểu dữ liệu danh sách @each

Khác với @for thì @each được dùng để lặp đi lặp lại giá trị trong một danh sách đã có sẵn.Thực tế nhiều bạn dùng SASS cũng ít khi sử dụng đến @each.

Nhưng bạn cũng nên biết qua chức năng của nó để khi nào gặp trường hợp tương tự sẽ nghĩ ngay đến nó và sử dụng luôn.

SASS

Ví dụ trên mình lặp đi lặp lại những giá trị tên và giá trị số theo từng cặp.

CSS

Sau khi biên dịch ra CSS chúng ta sẽ có kết quả như trên.

Kết luận

Đây là bài viết lý thuyết cuối cùng trong serie học và sử dụng SASS toàn tập trên blog của mình.Qua bài viết sử dụng SASS nâng cao này mình hi vọng bạn sẽ có thêm kiến thức để tham gia những dự án lớn hơn.

Trong những bài tiếp theo của serie này mình sẽ tiếp tục gửi đến các bạn các bài viết ứng dụng SASS để viết CSS trong thực tế.Hãy tiếp tục theo dõi và ủng hộ blog bạn nhé.

 

 

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x