Công cụ html

Chắc chắn các bạn đã nghe qua SASS SCSS hay LESS giúp việc code CSS nhanh hơn, sử dụng được nhiều chức năng hay như sử dụng biến, mixins, functions[hàm]…. Có thể tái sử dụng mã một cách hợp lý giúp mã công việc trở nên linh hoạt, nhanh chóng tiết kiệm thời gian…

Thì bên cạnh HTML cũng thế nó cũng có những engine như CSS giúp cho công việc code trở nên nhanh chóng, tiện lợi tiết kiệm nhiều thời gian cho lập trình viên và 1 trong số đó chính là PUG. Hôm nay mình sẽ giới thiệu sơ lược về PUG cho các bạn biết nó là gì cũng như cách sử dụng cơ bản của chúng ta trước nhé

# Khái niệm

PUG là một template engine cực kỳ mạnh giúp thay đổi hoàn toàn cách viết HTML với những cú pháp hoàn toàn mới, nhiều tính năng tiện ích và tất nhiên sẽ giải quyết những vấn đề mà HTML không làm được

Nếu các bạn nào đã từng làm qua SASS SCSS hay LESS bên CSS thì nó cũng tương tự đó nhưng cái PUG này là dành cho HTML nà

# Thuộc tính

Về các thuộc tính của PUG thì ở trang chủ của PUG đã trình bày rất chi tiết và kỹ càng nên mình sẽ không trình bày lại nữa. Các bạn có thể tham khảo tại đây. Ở bài viết này mình chủ yếu sẽ hướng dẫn các bạn cách sử dụng PUG đơn giản trước

Việc mã PUG sẽ giúp bạn tiết kiệm thời gian tiết kiệm thời gian vì trong HTML mỗi lần bạn nhập thì bạn phải nhập như thế này

Khi các bạn sử dụng PUG rồi thì nó sẽ lược bỏ bớt còn như thế này mà thôi. Và PUG sẽ hiển thị ra HTML y như đoạn mã mà mình nhập ở trên.
______1

Trên đây là một front-end template workflow đơn giản mà mình tự tìm hiểu và xây dựng cho bản thân. Để giúp công việc cắt PSD một cách nhanh chóng, tiện lợi bằng cách phân chia cấu trúc thư mục gọn gàng hợp lý cũng như sử dụng PUG để viết mã HTML nhanh hơn và SCSS để viết mã CSS nhanh hơn.

# Sử dụng

Để thử mã PUG thì rất đơn giản các bạn vào Codepen thần thánh để tạo một cây bút bất kỳ sau đó tại mục HTML chọn PUG như hình

And after that you try file code. Các bạn có thể tham khảo Codepen mà mình code lúc tập luyện ở dưới đây

Xem Giao diện người dùng bút – Sản phẩm giày của EvonDev [@blackzero] trên CodePen

Nếu các bạn muốn xem lúc nó render ra HTML như thế nào thì các bạn nhấn vào nút mũi tên bên phải sau đó chọn View CompiledHTML thì Codepen sẽ tự động render từ PUG ra HTML cho các bạn dễ cấu hình

Và các bạn sẽ đạt được kết quả như mong đợi. Nếu các bạn muốn chuyển về code PUG ban đầu thì chỉ cần nhấn

.header
  .header-inner

0 là được nà

# Mixins

Sau khi các bạn đọc ở trang chủ của nó về những

.header
  .header-inner

1,… thì trong số đó có một tính năng rất hay mà mình luôn dùng khi code với PUG đó là

.header
  .header-inner

2

Bình thường khi các bạn cắt 1 template PSD chắc chắn sẽ gặp nhiều trường hợp sử dụng lại cấu trúc tiêu đề giống nhau hoặc là hình ảnh, đường dẫn[link] hoặc là một khối nhỏ nào đó thì việc sử dụng Mixins nó cho phép

Ví dụ bạn code 3 mục nào có cấu trúc giống nhau và trong HTML thì bạn code nó như thế này sau đó copy ra 3 lần và thay đổi nội dung tương ứng cho các mục còn lại không đúng

  

    
this is title
    
Lorem ipsum
    
  

Còn trong PUG thì mình sẽ code như thế này. Các bạn có thể xem thêm demo của mình tại Codepen luôn nhé

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"]

Mình viết một cái Mixin đơn giản có tên là

.header
  .header-inner

3 với cú pháp

.header
  .header-inner

0 sau đó mình .

Nếu bạn nào đã học JS tới phần function[hàm] thì đọc vô cái Mixin sẽ thấy nó na ná nhau và hiểu ngay. Còn bạn nào chưa dùng bao giờ thì chắc hơi bỡ ngỡ và cần phải luyện từ mới hiểu được hoặc học JS là sẽ hiểu liền nè

Xem Hướng dẫn Pen PUG #1 của EvonDev [@blackzero] trên CodePen

Ngoài ra còn 2 Mixins hay nữa các bạn có thể tham khảo thêm tại Codepen này của mình luôn nhé. Mình có viết kèm giải thích trong Codepen cho các bạn thông hiểu luôn ý. Các bạn nhớ nhấn vào Codepen để xem code PUG nha

Xem Hướng dẫn Pen PUG #1 của EvonDev [@blackzero] trên CodePen

# Tạm dừng

Đây chỉ mới là bước cơ bản mình hướng dẫn cho các bạn biết thôi, sau này mình sẽ hướng dẫn các bạn xây dựng hoàn chỉnh một

.header
  .header-inner

3 giống của mình ở trên. Use GIMP to build up. Giúp các bạn tự tạo riêng cho bản thân một mẫu để hỗ trợ cắt PSD nhanh chóng

Để cho nhanh hiểu hơn về PUG các bạn nên tham khảo mã code ở một số trang nước ngoài và trang chủ của PUG cũng như trên Youtube với từ khóa “pug html mixins, pug html if other, pug html tutorials…. ”. Cảm ơn các bạn đã đọc bài viết và chúc các bạn một ngày tốt lành nhé