summaryrefslogtreecommitdiffhomepage
path: root/pt-br/less-pt.html.markdown
blob: 679a2ed2828e818f7b033b838f9226e24ae3d880 (plain)
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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
---
language: less
filename: learnless.less
contributors:
  - ["Saravanan Ganesh", "http://srrvnn.me"]

lang: pt-br
---

Less é um pré-processador de CSS, que adiciona recursos como variáveis, aninhamento, mixins e muito mais.
Less (e outros pré-processadores, como o [Sass](http://sass-lang.com/)) ajudam os desenvolvedores a escreverem código que pode ser mantido e DRY (não se repita).

```css


//Comentários de linha única são removidos quando Less é compilado para CSS.

/*Comentários de várias linhas são preservados.*/



/* Variáveis
==============================*/


/* Você pode armazenar um valor de CSS (como uma cor) em uma variável.
   Use o símbolo '@' para criar uma variável. */

@primary-color: #a3a4ff;
@secondary-color: #51527f;
@body-font: 'Roboto', sans-serif;

/* Você pode usar as variáveis ​​em toda a sua folha de estilo.
   Agora, se você quiser alterar uma cor, só precisa fazer a alteração uma vez. */

body {
	background-color: @primary-color;
	color: @secondary-color;
	font-family: @body-font;
}

/* Isso compilará para: */

body {
	background-color: #a3a4ff;
	color: #51527F;
	font-family: 'Roboto', sans-serif;
}


/* Isso é muito mais sustentável do que ter que mudar a cor
   cada vez que aparece em toda a sua folha de estilo. */



/* Mixins
==============================*/


/* Se você achar que está escrevendo o mesmo código para mais de um
   elemento, você pode querer reutilizá-lo facilmente. */

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

/* Você pode usar o mixin simplesmente adicionando o seletor como um estilo. */

div {
	.center;
	background-color: @primary-color;
}

/* Que compilaria para: */

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
div {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	background-color: #a3a4ff;
}

/* Você pode omitir o código mixin de ser compilado adicionando parênteses
   depois do seletor. */

.center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

div {
  .center;
  background-color: @primary-color;
}

/* Que compilaria para: */
div {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: #a3a4ff;
}



/* Aninhamento
==============================*/


/* Less permite aninhar seletores nos seletores. */

ul {
	list-style-type: none;
	margin-top: 2em;

	li {
		background-color: #f00;
	}
}

/* '&' será substituído pelo seletor pai. */
/* Você também pode aninhar pseudo-classes. */
/* Tenha em mente que o aninhamento excessivo tornará seu código menos sustentável.
   As melhores práticas recomendam não ultrapassar 3 níveis de profundidade ao aninhar.
   Por exemplo: */

ul {
  list-style-type: none;
  margin-top: 2em;

  li {
    background-color: red;

    &:hover {
      background-color: blue;
    }

    a {
      color: white;
    }
  }
}

/* Compila para: */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/* Functions
==============================*/


/* Less fornece funções que podem ser usadas para realizar uma variedade de
   tarefas. Considere o seguinte: */

/* Funções podem ser invocadas usando seu nome e passando os
   argumentos requeridos. */

body {
  width: round(10.25px);
}

.header {
	background-color: lighten(#000, 0.5);
}

.footer {
  background-color: fadeout(#000, 0.25)
}

/* Compila para: */

body {
  width: 10px;
}

.header {
  background-color: #010101;
}

.footer {
  background-color: rgba(0, 0, 0, 0.75);
}

/* Você também pode definir suas próprias funções. Funções são muito semelhantes às
   mixins. Ao tentar escolher entre uma função ou a um mixin, lembre-se
   que mixins são melhores para gerar CSS, enquanto as funções são melhores para
   lógica que pode ser usada em todo o seu código Less. Os exemplos na
   seção 'Operadores Matemáticos' são candidatos ideais para se tornarem funções reutilizáveis. */

/* Esta função calcula a média de dois números: */

.average(@x, @y) {
  @average-result: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "chama" o mixin
  padding: @average-result;    // use seu valor de "retorno"
}

/* Compila para: */

div {
  padding: 33px;
}



/* Estender (herança)
==============================*/


/* Estender é uma maneira de compartilhar as propriedades de um seletor com outro. */

.display {
  height: 50px;
}

.display-success {
  &:extend(.display);
	border-color: #22df56;
}

/* Compila para: */

.display,
.display-success {
  height: 50px;
}
.display-success {
  border-color: #22df56;
}

/* Estender uma instrução CSS é preferível para criar um mixin
   por causa da maneira como agrupa as classes que compartilham
   o mesmo estilo base. Se isso foi feito com um mixin, as propriedades
   seriam duplicadas para cada declaração que
   chamou o mixin. Embora isso não afete o seu fluxo de trabalho,
   adicione o inchaço desnecessário aos arquivos criados pelo compilador Less. */



/* Parciais e Importações
==============================*/


/* Less permite criar arquivos parciais. Isso pode ajudar a manter o seu
   código Less modularizado. Arquivos parciais convencionalmente começam com um '_',
   por exemplo. _reset.less. e são importados para um arquivo less principal que recebe
   o css compilado. */

/* Considere o seguinte CSS que vamos colocar em um arquivo chamado _reset.less */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Less disponibiliza @import que podem ser usadas para importar parciais em um arquivo.
   Isso difere da declaração tradicional CSS @import que faz
   outra solicitação HTTP para buscar o arquivo importado. Less leva o
   arquivo importado e combina com o código compilado. */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* Compila para: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/* Operações Matemáticas
==============================*/


/* Less fornece os seguintes operadores: +, -, *, / e %. Estes podem
   ser úteis para calcular valores diretamente nos seus arquivos Less
   para usar valores que você já calculou manualmente. Abaixo está um exemplo
   de como configurar um design simples de duas colunas. */

@content-area: 960px;
@main-content: 600px;
@sidebar-content: 300px;

@main-size: @main-content / @content-area * 100%;
@sidebar-size: @sidebar-content / @content-area * 100%;
@gutter: 100% - (@main-size + @sidebar-size);

body {
  width: 100%;
}

.main-content {
  width: @main-size;
}

.sidebar {
  width: @sidebar-size;
}

.gutter {
  width: @gutter;
}

/* Compila para: */

body {
  width: 100%;
}

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}


```

## Pratique Less

Se você quiser praticar com Less no seu navegador, confira: * [Codepen](http://codepen.io/) * [LESS2CSS](http://lesscss.org/less-preview/)

## Compatibilidade

Less pode ser usado em qualquer projeto, desde que você tenha um programa para compilá-lo em CSS. Você deseja verificar
se o CSS que você está usando é compatível com seus navegadores de destino.

[QuirksMode CSS](http://www.quirksmode.org/css/) e [CanIUse](http://caniuse.com) são ótimos recursos para verificar a compatibilidade.

## Leitura adicional
* [Documentação Oficial](http://lesscss.org/features/)
* [Less CSS - Guia do iniciante](http://www.hongkiat.com/blog/less-basic/)