5분만에 퍼그 배우기

HTML이 프로그래밍 언어인지 궁금한 적이 있습니까? pug를 사용하여 HTML에 프로그래밍 언어의 기능을 부여할 수 있습니다.

이긴 흙

이것은 HTML을 구동하는 전처리기이며 믹스인, 함수, 변수 및 조건문과 같은 정말 유용한 기능을 제공합니다.

컴파일러

Pug는 컴파일된 언어이며 작업을 시작하려면 컴파일러를 설치해야 합니다.(컴파일하는 방법도 많고 컴파일러도 많습니다.) 이 경우 Prepross를 사용하겠습니다.

prepross를 설치하려면 here.을 입력해야 합니다.



운영 체제를 선택한 다음 설치 프로그램을 실행하고 완료되면 프로젝트를 컴파일러로 드래그하여 바인딩하면 컴파일러가 생깁니다. less, sass, stylus 및 pug와 같은 다른 전처리기에 사용할 수 있습니다. .

통사론

태그

Pug는 HTML과 매우 비슷하지만 태그가 다르게 배치됩니다.

///In HTML

<header>
  <h1>Hello</h1>
  <h2>Hello</h2>
  <a href="dev.to">Dev</a>

<header/>

///In Pug

header
  h1 Hello
  h2 Hello
///To place attributes in pug it is done between parentheses and pasted to the label.

  a(href="dev.to") Dev

변수

///Declare
/// You can use arrays, too.
-let name = "Juan", age = 30, address = "New Yersey City"

//colocar en una etiqueta
p= " Hi!!, my name is " + name + " and live in " + address

///Call

p #(name)

pug에서 변수를 사용하는 방법에 대한 보다 완전한 가이드를 남겨 드립니다here.

믹스인

///Declare
mixin list

 ol
     li dog
     li cat
     li fish

///Use
+list

section
  +list

네스팅

///include
Includes allow you to insert the contents of one Pug file into another.

include componentes/main.pug

당신은 기본 pug를 알고 있고 다른 전처리기를 배울 수 있습니다. 여기에 이에 대한 제 튜토리얼이 있습니다.