1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
---
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
//- <div></div>
h1
//- <h1></h1>
minha-propriaTag
//- <minha-propriaTag></minha-propriaTag>
//- Tags irmãs
div
div
//- <div></div>
<div></div>
//- Tags aninhadas
div
div
//- <div>
<div></div>
</div>
//- Textos
h1 Olá, pessoas
//- <h1>Olá, pessoas</h1>
//- Texto de várias linhas
div.
Oi,
tudo bem?
//- <div>
Oi,
tudo bem?
</div>
//- ---ATRIBUTOS---
div(class="minha-class" id="meu-id" meu-proprio-atributo="data" enabled)
//- <div class="minha-class" id="meu-id" meu-proprio-atributo="data" enabled></div>
//- Abreviações
span.minha-class
//- <span class="minha-class"></span>
.minha-class
//- <div class="minha-class"></div>
div#meu-id
//- <div id="meu-id"></div>
div#meu-id.minha-class
//- <div class="minha-class" id="meu-id"></div>
//- ---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)
//- <div class="class1 class2 class3"></div>
//- Estilos com Javascript
- const myStyles = {'color':'white', 'background-color':'blue'}
div(styles=myStyles)
//- <div styles="{"color":"white","background-color":"blue"}"></div>
//- Atributos com Javascript
- const myAttributes = {"src": "photo.png", "alt": "My Photo"}
img&attributes(myAttributes)
//- <img src="photo.png" alt="My Photo">
- let disabled = false
input(type="text" disabled=disabled)
//- <input type="text">
- disabled = true
input(type="text" disabled=disabled)
//- <input type="text" disabled>
//- Templates com Javascript
- const name = "Bob";
h1 Olá, #{name}
h1= name
//- <h1>Olá, Bob</h1>
//- <h1>Bob</h1>
//- ---LOOPS---
//- 'each' e 'for' tem a mesma função, aqui nós usaremos apenas 'each'.
each value, i in [1,2,3]
p=value
//-
<p>1</p>
<p>2</p>
<p>3</p>
each value, index in [1,2,3]
p=value + '-' + index
//-
<p>1-0</p>
<p>2-1</p>
<p>3-2</p>
each value in []
p=value
//-
each value in []
p=value
else
p Sem valores
//- <p>Sem valores</p>
//- ---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
//- <p>o número é 5</p>
- 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
//- <p class="warn">Seu pedido está em espera</p>
//- --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
//-
<html>
<body>
<h1>Indústrias ACME</h1>
<nav><a href="index.html">Início</a><a href="about.html">Sobre Nós</a></nav>
</body>
</html>
//- Importando Javascript e CSS
script
include scripts/index.js
style
include styles/theme.css
//- ---MIXIN---
mixin basic
div Olá
+basic
//- <div>Olá</div>
mixin comment(nome, comentario)
div
span.comment-name= nome
div.comment-text= comentario
+comment("Gil", "Tudo é divino, tudo é maravilhoso")
//-
<div>
<span class="comment-name">Gil</span>
<div class="comment-text">Tudo é divino, tudo é maravilhoso</div>
</div>
```
### 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)
|
