diff options
Diffstat (limited to 'pt-br')
| -rw-r--r-- | pt-br/less-pt.html.markdown | 390 | ||||
| -rw-r--r-- | pt-br/make-pt.html.markdown | 242 |
2 files changed, 632 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/) diff --git a/pt-br/make-pt.html.markdown b/pt-br/make-pt.html.markdown new file mode 100644 index 00000000..8e7603cc --- /dev/null +++ b/pt-br/make-pt.html.markdown @@ -0,0 +1,242 @@ +---
+language: make
+contributors:
+ - ["Robert Steed", "https://github.com/robochat"]
+ - ["Stephan Fuhrmann", "https://github.com/sfuhrm"]
+filename: Makefile
+
+lang: pt-br
+---
+
+Um Makefile define um gráfico de regras para criar um alvo (ou alvos). Sua finalidade é fazer o mínimo de trabalho necessário para atualizar um alvo para a versão mais recente da fonte. Famosamente escrito ao longo de um fim de semana por Stuart Feldman em 1976, ainda é amplamente usada (particularmente no Unix e no Linux) apesar de muitos concorrentes e críticas.
+
+Existem muitas variedades de make na existência, no entanto, este artigo pressupõe que estamos usando o GNU make, que é o padrão no Linux.
+
+```make
+
+# Comentários podem ser escritos assim.
+
+# O arquivo deve ser nomeado Makefile e então pode ser executado como `make <alvo>`.
+# Caso contrário, nós usamos `make -f "nome-do-arquivo" <alvo>`.
+
+# Aviso - use somente TABS para identar em Makefiles, nunca espaços!
+
+#-----------------------------------------------------------------------
+# Noções básicas
+#-----------------------------------------------------------------------
+
+# Regras são do formato
+# alvo: <pré-requisito>
+# onde os pré-requisitos são opcionais.
+
+# Uma regra - esta regra só será executada se o arquivo0.txt não existir.
+arquivo0.txt:
+ echo "foo" > arquivo0.txt
+ # Mesmo os comentários nestas seções da 'receita' são passados para o shell.
+ # Experimentar `make arquivo0.txt` or simplyou simplesmente `make` - primeira regra é o padrão.
+
+# Esta regra só será executada se arquivo0.txt for mais recente que arquivo1.txt.
+arquivo1.txt: arquivo0.txt
+ cat arquivo0.txt > arquivo1.txt
+ # se as mesmas regras de citação do shell.
+ @cat arquivo0.txt >> arquivo1.txt
+ # @ pára o comando de ser ecoado para stdout.
+ -@echo 'hello'
+ # - significa que make continuará em caso de erro.
+ # Experimentar `make arquivo1.txt` na linha de comando.
+
+# Uma regra pode ter vários alvos e vários pré-requisitos
+arquivo2.txt arquivo3.txt: arquivo0.txt arquivo1.txt
+ touch arquivo2.txt
+ touch arquivo3.txt
+
+# Make vai reclamar sobre várias receitas para a mesma regra. Esvaziar
+# receitas não contam e podem ser usadas para adicionar novas dependências.
+
+#-----------------------------------------------------------------------
+# Alvos falsos
+#-----------------------------------------------------------------------
+
+# Um alvo falso. Qualquer alvo que não seja um arquivo.
+# Ele nunca será atualizado, portanto, o make sempre tentará executá-lo.
+all: maker process
+
+# Podemos declarar as coisas fora de ordem.
+maker:
+ touch ex0.txt ex1.txt
+
+# Pode evitar quebrar regras falsas quando um arquivo real tem o mesmo nome
+.PHONY: all maker process
+# Este é um alvo especial. Existem vários outros.
+
+# Uma regra com dependência de um alvo falso sempre será executada
+ex0.txt ex1.txt: maker
+
+# Alvos falsos comuns são: todos fazem instalação limpa ...
+
+#-----------------------------------------------------------------------
+# Variáveis Automáticas e Curingas
+#-----------------------------------------------------------------------
+
+process: Arquivo*.txt # Usando um curinga para corresponder nomes de arquivos
+ @echo $^ # $^ é uma variável que contém a lista de pré-requisitos
+ @echo $@ # imprime o nome do alvo
+ #(fpara várias regras alvo, $@ é o que causou a execução da regra)
+ @echo $< # o primeiro pré-requisito listado
+ @echo $? # somente as dependências que estão desatualizadas
+ @echo $+ # todas as dependências, incluindo duplicadas (ao contrário do normal)
+ #@echo $| # todos os pré-requisitos 'somente pedidos'
+
+# Mesmo se dividirmos as definições de dependência de regra, $^ vai encontrá-los
+process: ex1.txt arquivo0.txt
+# ex1.txt será encontrado, mas arquivo0.txt será desduplicado.
+
+#-----------------------------------------------------------------------
+# Padrões
+#-----------------------------------------------------------------------
+
+# Pode ensinar make a converter certos arquivos em outros arquivos.
+
+%.png: %.svg
+ inkscape --export-png $^
+
+# As regras padrões só farão qualquer coisa se decidirem criar o alvo.
+
+# Os caminhos de diretório são normalmente ignorados quando as regras de
+# padrões são correspondentes. Mas make tentará usar a regra mais
+# apropriada disponível.
+small/%.png: %.svg
+ inkscape --export-png --export-dpi 30 $^
+
+# make utilizará a última versão para uma regra de padrão que encontrar.
+%.png: %.svg
+ @echo esta regra é escolhida
+
+# No entanto, o make usará a primeira regra padrão que pode se tornar o alvo
+%.png: %.ps
+ @echo esta regra não é escolhida se *.svg and *.ps estão ambos presentes
+
+# make já tem algumas regras padrões embutidas. Por exemplo, ele sabe
+# como transformar arquivos *.c em arquivos *.o.
+
+# Makefiles antigos podem usar regras de sufixo em vez de regras padrões
+.png.ps:
+ @echo essa regra é semelhante a uma regra de padrão.
+
+# make sobre a regra de sufixo
+.SUFFIXES: .png
+
+#-----------------------------------------------------------------------
+# Variáveis
+#-----------------------------------------------------------------------
+# aka. macros
+
+# As variáveis são basicamente todos os tipos de string
+
+name = Ted
+name2="Sarah"
+
+echo:
+ @echo $(name)
+ @echo ${name2}
+ @echo $name # Isso não funcionará, tratado como $ (n)ame.
+ @echo $(name3) # Variáveis desconhecidas são tratadas como strings vazias.
+
+# Existem 4 lugares para definir variáveis.
+# Em ordem de prioridade, do maior para o menor:
+# 1: argumentos de linha de comando
+# 2: Makefile
+# 3: variáveis de ambiente do shell - faça importações automaticamente.
+# 4: make tem algumas variáveis predefinidas
+
+name4 ?= Jean
+# Somente defina a variável se a variável de ambiente ainda não estiver definida.
+
+override name5 = David
+# Pára os argumentos da linha de comando de alterar essa variável.
+
+name4 +=grey
+# Anexar valores à variável (inclui um espaço).
+
+# Valores variáveis específicos de padrões (extensão GNU).
+echo: name2 = Sara # Verdadeiro dentro da regra de correspondência
+ # e também dentro de suas recursivas dependências
+ # (exceto que ele pode quebrar quando seu gráfico ficar muito complicado!)
+
+# Algumas variáveis definidas automaticamente pelo make
+echo_inbuilt:
+ echo $(CC)
+ echo ${CXX}
+ echo $(FC)
+ echo ${CFLAGS}
+ echo $(CPPFLAGS)
+ echo ${CXXFLAGS}
+ echo $(LDFLAGS)
+ echo ${LDLIBS}
+
+#-----------------------------------------------------------------------
+# Variáveis 2
+#-----------------------------------------------------------------------
+
+# O primeiro tipo de variáveis é avaliado a cada vez que elas são usadas.
+# TIsso pode ser caro, então existe um segundo tipo de variável que é
+# avaliado apenas uma vez. (Esta é uma extensão do GNU make)
+
+var := hello
+var2 ::= $(var) hello
+#:= e ::= são equivalentes.
+
+# Essas variáveis são avaliadas procedimentalmente (na ordem em que
+# aparecem), quebrando assim o resto da línguagem!
+
+# Isso não funciona
+var3 ::= $(var4) and good luck
+var4 ::= good night
+
+#-----------------------------------------------------------------------
+# Funções
+#-----------------------------------------------------------------------
+
+# make tem muitas funções disponíveis.
+
+sourcefiles = $(wildcard *.c */*.c)
+objectfiles = $(patsubst %.c,%.o,$(sourcefiles))
+
+# O formato é $(func arg0,arg1,arg2...)
+
+# Alguns exemplos
+ls: * src/*
+ @echo $(filter %.txt, $^)
+ @echo $(notdir $^)
+ @echo $(join $(dir $^),$(notdir $^))
+
+#-----------------------------------------------------------------------
+# Diretivas
+#-----------------------------------------------------------------------
+
+# Inclua outros makefiles, úteis para código específico da plataforma
+include foo.mk
+
+sport = tennis
+# Compilação condicional
+report:
+ifeq ($(sport),tennis)
+ @echo 'game, set, match'
+else
+ @echo "They think it's all over; it is now"
+endif
+
+# Há também ifneq, ifdef, ifndef
+
+foo = true
+
+ifdef $(foo)
+bar = 'hello'
+endif
+```
+
+### More Resources
+
++ [documentação gnu make](https://www.gnu.org/software/make/manual/)
++ [tutorial de carpintaria de software](http://swcarpentry.github.io/make-novice/)
++ aprenda C da maneira mais difícil [ex2](http://c.learncodethehardway.org/book/ex2.html) [ex28](http://c.learncodethehardway.org/book/ex28.html)
|