--- language: Pug contributors: - ["Michael Warner", "https://github.com/MichaelJGW"] filename: index-pt.pug translators: - ["Adaías Magdiel", "https://adaiasmagdiel.com/"] lang: pt-br --- ## Começando com Pug Pug é uma pequena linguagem que compila para HTML. Possui uma sintaxe limpa com algumas funcionalidades adicionais, como declarações if e loops. Também pode ser utilizada como uma linguagem de templates no lado do servidor para tecnologias como o Node.js. ### The Language ```pug //- Comentário de uma linha //- Comentário de várias linhas //- ---TAGS--- //- Básico div //-
h1 //-

minha-propriaTag //- //- Tags irmãs div div //-
//- Tags aninhadas div div //-
//- Textos h1 Olá, pessoas //-

Olá, pessoas

//- Texto de várias linhas div. Oi, tudo bem? //-
Oi, tudo bem?
//- ---ATRIBUTOS--- div(class="minha-class" id="meu-id" meu-proprio-atributo="data" enabled) //-
//- Abreviações span.minha-class //- .minha-class //-
div#meu-id //-
div#meu-id.minha-class //-
//- ---JAVASCRIPT--- - const lang = "pug"; //- Javascript em várias linhas - const lang = "pug"; const awesome = true; //- Classes com Javascript - const myClass = ['class1', 'class2', 'class3'] div(class=myClass) //-
//- Estilos com Javascript - const myStyles = {'color':'white', 'background-color':'blue'} div(styles=myStyles) //-
//- Atributos com Javascript - const myAttributes = {"src": "photo.png", "alt": "My Photo"} img&attributes(myAttributes) //- My Photo - let disabled = false input(type="text" disabled=disabled) //- - disabled = true input(type="text" disabled=disabled) //- //- Templates com Javascript - const name = "Bob"; h1 Olá, #{name} h1= name //-

Olá, Bob

//-

Bob

//- ---LOOPS--- //- 'each' e 'for' tem a mesma função, aqui nós usaremos apenas 'each'. each value, i in [1,2,3] p=value //-

1

2

3

each value, index in [1,2,3] p=value + '-' + index //-

1-0

2-1

3-2

each value in [] p=value //- each value in [] p=value else p Sem valores //-

Sem valores

//- ---CONDICIONAIS--- - const number = 5 if number < 5 p o número é menor do que 5 else if number > 5 p o número é maior do que 5 else p o número é 5 //-

o número é 5

- const orderStatus = "Aguardando"; case orderStatus when "Aguardando" p.warn Seu pedido está em espera when "Completado" p.success Seu pedido foi completado. when -1 p.error Ocorreu algum erro default p Nenhum registro de pedido encontrado //-

Seu pedido está em espera

//- --INCLUINDO CONTEÚDOS-- //- Caminho do arquivo -> "includes/nav.pug" h1 Indústrias ACME nav a(href="index.html") Início a(href="about.html") Sobre Nós //- Caminho do arquivo -> "index.pug" html body include includes/nav.pug //-

Indústrias ACME

//- Importando Javascript e CSS script include scripts/index.js style include styles/theme.css //- ---MIXIN--- mixin basic div Olá +basic //-
Olá
mixin comment(nome, comentario) div span.comment-name= nome div.comment-text= comentario +comment("Gil", "Tudo é divino, tudo é maravilhoso") //-
Gil
Tudo é divino, tudo é maravilhoso
``` ### Saiba Mais - [Site Oficial](https://pugjs.org/) - [Documentação](https://pugjs.org/api/getting-started.html) - [Repositório no GitHub](https://github.com/pugjs/pug)