diff options
| -rw-r--r-- | pt-br/less-pt.html.markdown | 390 |
1 files changed, 390 insertions, 0 deletions
diff --git a/pt-br/less-pt.html.markdown b/pt-br/less-pt.html.markdown new file mode 100644 index 00000000..679a2ed2 --- /dev/null +++ b/pt-br/less-pt.html.markdown @@ -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/) |