Pug là gì

     

Chắc hẳn các bạn đã nghe qua SASS SCSS tốt LESS giúp cho Việc code CSS được nhanh hao rộng, thực hiện được nhiều công dụng hay như là dùng trở thành, mixins, functions(hàm)…. Có thể tái áp dụng code một giải pháp phải chăng hỗ trợ cho câu hỏi code trsống buộc phải linch hoạt, nhanh khô lẹ tiết kiệm ngân sách thời gian…

Thì bên HTML cũng thế nó cũng có hầu như engine nhỏng CSS giúp cho câu hỏi code trsinh hoạt đề nghị mau lẹ, thuận lợi tiết kiệm ngân sách và chi phí nhiều thời hạn mang đến thiết kế viên cùng 1 trong những kia đó là PUG. Hôm ni bản thân đang ra mắt sơ sơ cơ bản về PUG cho các bạn biết nó là gì cũng giống như biện pháp thực hiện bọn chúng cơ bản trước nhé

# Khái niệm

PUG là một trong những template engine cực kì bạo phổi góp thay đổi hoàn toàn bí quyết viết HTML cùng với phần lớn cú pháp trọn vẹn bắt đầu, những nhân kiệt ứng dụng với tất yếu đang giải quyết số đông sự việc nhưng mà HTML thiết yếu làm cho được.

Bạn đang xem: Pug là gì

Nếu chúng ta làm sao đã từng có lần làm cho qua SASS SCSS hay LESS bên CSS thì nó cũng giống như đó dẫu vậy chiếc PUG này là dành cho HTML nà.

# Thuộc tính

Về những trực thuộc tính của PUG thì sống Home của PUG sẽ trình diễn vô cùng cụ thể với kỹ lưỡng yêu cầu mình sẽ không trình bày lại nữa. Các chúng ta có thể tham khảo ở chỗ này. Ở nội dung bài viết này bản thân đa phần đang trả lời các bạn giải pháp sử dụng PUG dễ dàng trước.

Việc code PUG để giúp đỡ chúng ta tiết kiệm ngân sách và chi phí thời gian là do vào HTML mỗi lần chúng ta gõ thì các bạn cần gõ như vậy này
Khi chúng ta sử dụng PUG rồi thì nó đã lược hạn chế còn như thế này nhưng mà thôi. Và PUG đã render ra HTML hệt như đoạn code mà lại mình gõ sinh sống bên trên..header .header-inner

*

Trên đó là một front-end template workflow đơn giản và dễ dàng cơ mà mình trường đoản cú tò mò và xây dựng đến bạn dạng thân. Để hỗ trợ cho quá trình giảm PSD một giải pháp lập cập thuận lợi bằng cách phân loại cấu tạo thư mục nhỏ gọn hợp lý cũng như áp dụng PUG nhằm code HTML nhanh khô rộng cùng SCSS để code CSS lẹ hơn.

# Sử dụng

Để code thử PUG thì vô cùng đơn giản dễ dàng chúng ta vào Codepen thần thánh vào chế tạo một pen bất kỳ tiếp đến trên mục HTML chọn PUG nlỗi hình

*

Và tiếp nối chúng ta tập code demo. Các bạn cũng có thể xem thêm Codepen mà lại bản thân code khi thi đấu ở dưới đây

See the Pen UI – Shoe Product by vumon.vn (
blackzero) on CodePen.

Nếu các bạn muốn xem thời gian nó render ra HTML ra sao thì chúng ta bấm vào nút mũi thương hiệu mặt buộc phải tiếp đến lựa chọn View CompiledHTML thì Codepen đang auto render từ bỏ PUG ra HTML đến các bạn dễ hình dung

*

Và các các bạn sẽ được tác dụng nhỏng ước ao ngóng. Nếu những bạn muốn chuyển về code PUG thuở đầu thì chỉ việc dìm View Uncomplied HTML là được nà.

*

# Mixins

Sau lúc chúng ta hiểu nghỉ ngơi trang chủ của nó về đầy đủ thuộc tính, ĐK if else, vòng lặp,… thì trong các kia tất cả một bản lĩnh rất lôi cuốn nhưng bản thân luôn sử dụng khi code cùng với PUG sẽ là Mixins.

Bình thường xuyên khi chúng ta giảm 1 template PSD chắc chắn rằng vẫn gặp mặt những ngôi trường vừa lòng cần sử dụng đi sử dụng lại cấu trúc tiêu đề tương đương nhau Hoặc là hình ảnh, đường dẫn(link) hay 1 block bé dại làm sao kia thì việc sử dụng Mixins nó có thể chấp nhận được ta chế tạo một bloông xã trong PUG với thực hiện lại các lần.

Xem thêm: Cách So Sánh Nhiệt Độ Sôi,Tính Axit,Bazơ, So Sánh Nhiệt Độ Sôi Của Các Chất Hữu Cơ Hóa 12

Ví dụ các bạn code 3 nhà cửa nào kia có cấu trúc như là nhau với vào HTML các bạn code nó như thế này kế tiếp copy ra 3 lần cùng biến hóa câu chữ khớp ứng cho các sản phẩm sót lại đúng không nhỉ nào.

this is title

Lorem ipsum

*

mixin item(title, desc, src) .tòa tháp h2.item-title= title p= desc img(src=src).wrap +item("haha","hehe","https://vumon.vn/pug-la-gi/imager_5_251927_700.jpg") +item("haha2","hehe2","demo2.jpg") +item("haha3","hehe3","demo3.jpg")Mình viết một cái Mixin dễ dàng mang tên là thành công với cú pháp mixin tênmixin(trở thành làm việc trong này) kế tiếp mình viết văn bản nhưng mà bạn muốn để cần sử dụng lại cũng giống như là gán các biến vào những địa điểm các thẻ HTML khớp ứng cùng với vệt = để khi mình Hotline nó ra bởi cú pháp +tenmixin(những cực hiếm tương ứng) lúc tạo nên làm việc Mixin.

Nếu các bạn nào vẫn học tập JS tới phần function(hàm) thì hiểu vô mẫu Mixin vẫn thấy nó giống như nhau với gọi ngay lập tức. Còn các bạn nào không cần sử dụng khi nào thì cứng cáp tương đối ngạc nhiên và rất cần được luyện nhàn hạ bắt đầu hiểu được hoặc học JS là đang đọc ngay thức thì nà.

See the Pen PUG Tutorials #1 by vumon.vn (
blackzero) on CodePen.

Trong khi còn 2 Mixins hay khác nữa các chúng ta cũng có thể tìm hiểu thêm trên Codepen này của chính bản thân mình luôn luôn nhé. Mình có viết kèm phân tích và lý giải trong Codepen mang đến các bạn gọi luôn ý. Các các bạn lưu giữ nhấp vào Codepen giúp xem code PUG nha

See the Pen PUG Tutorials #1 by vumon.vn (
blackzero) on CodePen.

# Tạm kết

Đây chỉ mới là bước cơ bạn dạng mình lí giải mang đến chúng ta biết thôi, trong tương lai bản thân vẫn trả lời chúng ta xây đắp hoàn chỉnh một frontend template workflow tương đương của bản thân sinh sống bên trên. Sử dụng GULP. nhằm buid lên. Giúp các bạn từ bỏ tạo thành riêng biệt cho phiên bản thân một template nhằm cung ứng giảm PSD được gấp rút.

Xem thêm: Cách Làm Hột Gà Nướng Thái Lan Ngon Miệng, Hợp Vệ Sinh, Cách Làm Trứng Gà Nướng Thái Lan

Để cho mau hiểu rộng về PUG các bạn nên xem thêm code sinh sống một số trong những trang quốc tế cùng Home của PUG tương tự như trên Youtube với từ khóa “pug html mixins, pug html if else, pug html tutorials….”. Cám ơn chúng ta đang hiểu bài viết với chúc các bạn một ngày xuất sắc lành nhé..


Chuyên mục: Tổng hợp