---
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)
//-
- 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)
- 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
//-