PUG là gì? Hướng dẫn cơ bản cho người mới bắt đầu

Chắc hẳn bạn đã từng nghe về SASS, SCSS hay LESS, những công cụ giúp việc viết CSS trở nên nhanh chóng và hiệu quả hơn, với nhiều tính năng như biến, mixins, và functions. Vậy thì, trong thế giới HTML, PUG cũng đóng vai trò tương tự. Bài viết này sẽ giới thiệu PUG, một template engine mạnh mẽ, cùng cách sử dụng cơ bản của nó.

Mục Lục

1 Khái niệm về PUG
2 Ưu điểm của PUG
3 Hướng dẫn sử dụng PUG
4 Mixins trong PUG
5 Kết luận

Khái niệm về PUG

PUG là một template engine mạnh mẽ, mang đến một cách tiếp cận hoàn toàn mới trong việc viết HTML. Với cú pháp đơn giản, nhiều tính năng tiện ích, PUG giúp giải quyết những vấn đề mà HTML truyền thống không thể. Nếu bạn đã quen với SASS, SCSS hay LESS trong CSS, PUG cũng hoạt động tương tự nhưng dành cho HTML.

Ưu điểm của PUG

Một trong những ưu điểm lớn nhất của PUG là khả năng tiết kiệm thời gian. Thay vì phải gõ đầy đủ các thẻ HTML, PUG cho phép bạn viết code ngắn gọn hơn nhiều. Ví dụ, thay vì:

<div class="header">
  <div class="header-inner">
  </div>
</div>

Với PUG, bạn chỉ cần viết:

.header
  .header-inner

PUG sẽ tự động render ra đoạn HTML tương ứng.

Ví dụ code PUG và HTML

Sử dụng PUG giúp đơn giản hóa quy trình làm việc front-end, giúp bạn cắt PSD nhanh chóng và hiệu quả hơn bằng cách tổ chức cấu trúc thư mục hợp lý, code HTML nhanh hơn với PUG và CSS nhanh hơn với SCSS.

Hướng dẫn sử dụng PUG

Để bắt đầu làm quen với PUG, bạn có thể sử dụng Codepen.

Truy cập Codepen (https://codepen.io/) và tạo một pen mới.
Trong mục HTML, chọn PUG.

Chọn PUG trên Codepen

Bây giờ, bạn có thể bắt đầu viết code PUG.

Bạn có thể tham khảo ví dụ sau trên Codepen:

Xem CodePen UI – Shoe Product by EvonDev (@blackzero) on CodePen

Để xem PUG render ra HTML như thế nào, nhấp vào mũi tên bên phải và chọn “View Compiled HTML”. Codepen sẽ tự động chuyển đổi code PUG thành HTML.

Xem HTML đã biên dịch

Nếu muốn quay lại code PUG ban đầu, chọn “View Uncompiled HTML”.

Xem code PUG gốc

Mixins trong PUG

Sau khi làm quen với các thuộc tính, điều kiện if else, vòng lặp của PUG, bạn sẽ thấy Mixins là một tính năng vô cùng hữu ích. Khi cắt một template PSD, bạn thường xuyên gặp các cấu trúc tiêu đề, hình ảnh, đường dẫn hoặc các block nhỏ lặp đi lặp lại. Mixins cho phép bạn tạo một block trong PUG và sử dụng lại nhiều lần.

Ví dụ, nếu bạn có 3 item với cấu trúc giống nhau, trong HTML bạn sẽ copy code và thay đổi nội dung tương ứng. Nhưng với PUG và Mixins, bạn có thể làm như sau:

mixin item(title, desc, src)
  .item
    h2.item-title= title
    p= desc
    img(src=src)

.wrap
  +item("haha","hehe","demo.jpg")
  +item("haha2","hehe2","demo2.jpg")
  +item("haha3","hehe3","demo3.jpg")

Ở đây, chúng ta tạo một Mixin có tên là item với các biến title, desc, src. Sau đó, chúng ta sử dụng lại Mixin này nhiều lần với các giá trị khác nhau. Cú pháp +tenmixin(các giá trị tương ứng) dùng để gọi Mixin. Nếu bạn đã quen với function trong Javascript, bạn sẽ thấy Mixins hoạt động tương tự.

Bạn có thể xem thêm ví dụ tại Codepen:

Xem CodePen PUG Tutorials #1 by EvonDev (@blackzero) on CodePen

Ngoài ra, bạn có thể tham khảo thêm các Mixins khác tại Codepen trên.

Kết luận

Bài viết này chỉ là một giới thiệu cơ bản về PUG. Để hiểu sâu hơn về PUG, bạn nên tìm hiểu thêm trên trang chủ của PUG, các trang web nước ngoài và Youtube với các từ khóa như “pug html mixins”, “pug html if else”, “pug html tutorials”… Chúc bạn thành công trên con đường chinh phục PUG!