mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-24 01:51:38 +00:00
[less/pt-br] Add portuguese language for less
This commit is contained in:
Rogério
parent
9e2bd7c11b
commit
cb88631777
390
pt-br/less-pt.html.markdown
Normal file
390
pt-br/less-pt.html.markdown
Normal file
@ -0,0 +1,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/)
|
||||
Loading…
Reference in New Issue
Block a user