Merge branch 'master' of github.com:damasosanoja/learnxinyminutes-docs into Spanish-Branch

2 files changed, 734 insertions, 0 deletions

diff --git a/pt-br/css-pt.html.markdown b/pt-br/css-pt.html.markdown
new file mode 100644
index 00000000..ed6f6c4c
--- /dev/null
+++ b/pt-br/css-pt.html.markdown
@@ -0,0 +1,257 @@
+---
+language: css
+filename: learncss-pt.css
+contributors:
+    - ["Mohammad Valipour", "https://github.com/mvalipour"]
+    - ["Marco Scannadinari", "https://github.com/marcoms"]
+    - ["Geoffrey Liu", "https://github.com/g-liu"]
+    - ["Connor Shea", "https://github.com/connorshea"]
+    - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
+translators:
+    - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
+lang: pt-br
+---
+
+Nos primeiros dias da web não havia elementos visuais, apenas texto puro. Mas com maior desenvolvimento de navegadores da web, páginas web totalmente visuais também se tornou comum.
+
+CSS ajuda a manter a separação entre o conteúdo (HTML) e o look-and-feel de uma página web.
+
+CSS permite atingir diferentes elementos em uma página HTML e atribuir diferentes propriedades visuais para eles.
+
+Este guia foi escrito para CSS2, embora CSS3 está rapidamente se tornando popular.
+
+**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa tentar de tudo em um playground CSS como [dabblet](http://dabblet.com/).
+O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais.
+
+```css
+/* Comentários aparecem dentro do slash-asterisk, tal como esta linha!
+   não há "comentários de uma linha"; este é o único estilo de comentário * /
+
+/* ####################
+   ## SELETORES
+   #################### */
+
+/* O seletor é usado para direcionar um elemento em uma página.
+   seletor { propriedade: valor; / * Mais propriedades ... * / }
+
+/*
+Abaixo um elemento de exemplo:
+
+<div class='class1 class2' id='anID' attr='value' otherAttr='pt-br foo bar' />
+*/
+
+/* Você pode direciona-lo usando uma das suas classes CSS */
+.class1 { }
+
+/* ou ambas as classes! */
+.class1.class2 { }
+
+/* ou o seu nome */
+div { }
+
+/* ou o seu id */
+#anID { }
+
+/* ou utilizando o fator de que tem um atributo!*/
+[attr] { font-size:smaller; }
+
+/* ou que o atributo tem um valor específico */
+[attr='value'] { font-size:smaller; }
+
+/* começa com um valor (CSS 3) */
+[attr^='val'] { font-size:smaller; }
+
+/* ou terminando com um valor (CSS 3) */
+[attr$='ue'] { font-size:smaller; }
+
+
+/* Ou contém um valor em uma lista separada por espaços */
+[otherAttr ~ = 'foo'] {}
+[otherAttr ~ = 'bar'] {}
+
+/* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */
+[otherAttr | = 'en'] {font-size: smaller; }
+
+
+/* Você pode concatenar diferentes seletores para criar um seletor mais estreito. Não
+   colocar espaços entre eles. */
+classe div.some [attr $ = 'ue'] {}
+
+/* Você pode selecionar um elemento que é filho de outro elemento */
+div.some-parent> .class-name {}
+
+/* Ou um descendente de um outro elemento. As crianças são os descendentes diretos de
+   seu elemento pai, apenas um nível abaixo da árvore. Pode ser qualquer descendentes
+   nivelar por baixo da árvore. */
+div.some-parent class-name {}
+
+/* Atenção: o mesmo seletor sem espaço tem um outro significado.
+   Você consegue adivinhar o que? */
+div.some-parent.class-name {}
+
+/* Você também pode selecionar um elemento com base em seu irmão adjacente */
+.i am just-antes + .Este elemento {}
+
+/* Ou qualquer irmão que o precede */
+.i am-qualquer-elemento antes ~ .Este elemento {}
+
+/* Existem alguns selectores chamado pseudo classes que podem ser usados para selecionar um
+   elemento quando ele está em um determinado estado */
+
+/* Por exemplo, quando o cursor passa sobre um elemento */
+seletor:hover {}
+
+/* Ou um link foi visitado */
+seletor:visited {}
+
+/* Ou não tenha sido visitado */
+seletor:link {}
+
+/* Ou um elemento em foco */
+seletor:focus {}
+
+/* Qualquer elemento que é o primeiro filho de seu pai */
+seletor:first-child {}
+
+/* Qualquer elemento que é o último filho de seu pai */
+seletor:last-child {}
+
+/* Assim como pseudo classes, pseudo elementos permitem que você estilo certas partes de um documento */
+
+/* Corresponde a um primeiro filho virtual do elemento selecionado */
+seletor::before {}
+
+/* Corresponde a um último filho virtual do elemento selecionado */
+seletor::after {}
+
+/* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar todos
+   elemento */
+* {} /* */ Todos os elementos
+.parent * {} /* */ todos os descendentes
+.parent> * {} /* */ todas as crianças
+
+/* ####################
+   ## PROPRIEDADES
+   #################### */
+
+seletor {
+
+    /* Unidades de comprimento pode ser absoluta ou relativa. */
+
+    /* Unidades relativas */
+    width: 50%; /* Percentagem de largura elemento pai */
+    font-size: 2em; /* Múltiplos de font-size original de elemento */
+    font-size: 2rem; /* Ou do elemento raiz font-size */
+    font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */
+    font-size: 2vh; /* Ou a sua altura */
+    font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */
+    font-size: 2vmax; /* Ou superior */
+
+    /* Unidades absolutas */
+    width: 200px; /* píxeis */
+    font-size: 20pt; /* Pontos */
+    width: 5cm; /* Centímetros */
+    min-width: 50mm; /* Milímetros */
+    max-width: 5 polegadas; /* Polegadas */
+
+    /* Cores */
+    color: # F6E; /* Formato hexadecimal curto */
+    color: # FF66EE; /* Formato hexadecimal longo */
+    color: tomato; /* Uma cor nomeada */
+    color: rgb (255, 255, 255); /* Como valores rgb */
+    cor: RGB (10%, 20%, 50%); /* Como porcentagens rgb */
+    cor: rgba (255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 <a <1 */
+    color: transparent; /* Equivale a definir o alfa a 0 */
+    cor: HSL (0, 100%, 50%); /* Como porcentagens HSL (CSS 3) */
+    cor: HSLA (0, 100%, 50%, 0,3); /* Como porcentagens HSLA com alfa */
+
+    /* Imagens como fundos de elementos */
+    background-image: url (/img-path/img.jpg); /* Citações dentro url () opcional */
+
+    /* Fontes */
+    font-family: Arial;
+    /* Se o nome da família de fonte tem um espaço, deve ser citado */
+    font-family: "Courier New";
+    /* Se o primeiro não for encontrada, o navegador usa o próximo, e assim por diante */
+    font-family: "Courier New", Trebuchet, Arial, sans-serif;
+}
+```
+
+## Uso
+
+Guardar uma folha de estilo CSS com a extensão `.css`.
+
+```xml
+<!-- Você precisa incluir o arquivo css no da sua página <head>. Isto é o
+     método recomendado. Consulte http://stackoverflow.com/questions/8284365 -->
+<link rel='stylesheet' type='text/css' href='path/to/style.css' />
+
+<!-- Você também pode incluir alguns CSS inline na sua marcação. -->
+<style>
+   a { color: purple; }
+</style>
+
+<!-- Ou diretamente definir propriedades CSS no elemento. -->
+<div style="border: 1px solid red;">
+</div>
+```
+
+## Precedência ou Cascata
+
+Um elemento pode ser alvo de vários seletores e pode ter um conjunto de propriedades em que mais de uma vez. Nestes casos, uma das regras tem precedência sobre os outros. Geralmente, uma regra em um seletor mais específico têm precedência sobre um menos específico, e uma regra que ocorre mais tarde na folha de estilo substitui uma anterior.
+
+Este processo é chamado de cascata, portanto, as Fichas de nome de estilo em cascata.
+
+Dado o seguinte CSS:
+
+```css
+/* UMA */
+p.class1[attr="value"]
+
+/* B */
+p.class1 {}
+
+/* C */
+p.class2 {}
+
+/* D */
+p { }
+
+/* E */
+p { property: value !important; }
+```
+
+e a seguinte marcação:
+
+```xml
+<p style='/*F*/ property:value;' class='class1 class2' attr='value' />
+```
+
+A precedência de estilo é a seguinte. Lembre-se, a precedência é para cada  **propriedade**, não para todo o bloco.
+
+* `E` tem a precedência mais alta por causa de uma palavra-chave`!important`. É recomendável que você evitar seu uso.
+* `F` é a próxima, porque é um estilo interno.
+* `A` é a próxima, porque é mais" específico "do que qualquer outra coisa. Tem 3 especificadores: O nome do elemento `p`, o seu `class1` classe, um atributo `attr='value'`.
+* `C` está próximo, mesmo que ele tenha a mesma especificidade que `B`. Isso é porque ele aparece depois de `B`.
+* `B` é o próximo.
+* `D` é a última.
+
+## Compatibilidade
+
+A maior parte dos recursos do CSS 2 (e muitos em CSS 3) estão disponíveis em todos os navegadores e dispositivos. Mas é sempre boa prática para verificar antes de usar um novo recurso.
+
+## Recursos
+
+* Para executar uma verificação de compatibilidade rápida, [CanIUse](http://caniuse.com).
+* CSS Playground [Dabblet](http://dabblet.com/).
+* [Documentação CSS Mozilla Developer Rede](https://developer.mozilla.org/en-US/docs/Web/CSS)
+* [Codrops 'Referência CSS](http://tympanus.net/codrops/css_reference/)
+
+## Leitura adicional
+
+* [Entendendo Estilo Precedência em CSS: Especificidade, Herança, eo Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
+* [Selecionando elementos usando atributos](https://css-tricks.com/almanac/selectors/a/attribute/)
+* [QuirksMode CSS](http://www.quirksmode.org/css/)
+* [Z-Index - O empilhamento context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
+* [SASS](http://sass-lang.com/) e [menos](http://lesscss.org/) para CSS pré-processamento
+* [CSS-Tricks](https://css-tricks.com)
diff --git a/pt-br/sass-pt.html.markdown b/pt-br/sass-pt.html.markdown
new file mode 100644
index 00000000..105896b2
--- /dev/null
+++ b/pt-br/sass-pt.html.markdown
@@ -0,0 +1,477 @@
+---
+language: sass
+filename: learnsass-pt.scss
+contributors:
+  - ["Laura Kyle", "https://github.com/LauraNK"]
+  - ["Sean Corrales", "https://github.com/droidenator"]
+translators:
+  - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
+lang: pt-br
+---
+
+Sass é uma linguagem de extensão CSS que adiciona recursos, como variáveis, aninhamento, mixins e muito mais.
+Sass (e outros pré-processadores, como [Less](http://lesscss.org/)) ajudam os desenvolvedores a escrever código de fácil manutenção e DRY (Do not Repeat Yourself).
+
+Sass tem duas opções de sintaxe diferentes para escolher. SCSS, que tem a mesma sintaxe de CSS, mas com os recursos adicionais de Sass. Ou Sass (a sintaxe original), que usa o recuo, em vez de chaves e ponto e vírgula.
+Este tutorial é escrito usando SCSS.
+
+Se você já está familiarizado com CSS3, você será capaz de pegar Sass de forma relativamente rápida. Ele não fornece quaisquer novas opções de estilo, mas sim as ferramentas para escrever sua CSS de forma mais eficiente e fazer a manutenção mais fácilmente.
+
+```scss
+
+
+// Comentários de linha única são removidos quando Sass é compilado para CSS.
+
+/* Comentários multi-line são preservados. */
+
+
+
+/*Variáveis
+==============================*/
+
+
+
+/* É possível armazenar um valor CSS (tais como a cor) de 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ê quer mudar a cor, você só tem que fazer a mudança uma vez. */
+
+body {
+	background-color: $primary-color;
+	color: $secondary-color;
+	font-family: $body-font;
+}
+
+/* Quando compilar ficaria assim: */
+body {
+	background-color: #A3A4FF;
+	color: #51527F;
+	font-family: 'Roboto', sans-serif;
+}
+
+
+/ * Este é muito mais fácil de manter do que ter de mudar a cor
+cada vez que aparece em toda a sua folha de estilo. * /
+
+
+
+
+/*Mixins
+==============================*/
+
+
+
+/* Se você achar que você está escrevendo o mesmo código para mais de um
+elemento, você pode querer armazenar esse código em um mixin.
+
+Use a diretiva '@mixin', além de um nome para o seu mixin. */
+
+@mixin center {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	left: 0;
+	right: 0;
+}
+
+/* Você pode usar o mixin com '@include' e o nome mixin. */
+
+div {
+	@include center;
+	background-color: $primary-color;
+}
+
+/* Apoś compilar ficaria assim: */
+div {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	left: 0;
+	right: 0;
+	background-color: #A3A4FF;
+}
+
+
+/* Você pode usar mixins para criar uma propriedade estenográfica. */
+
+@mixin size($width, $height) {
+	width: $width;
+	height: $height;
+}
+
+/* O que você pode invocar passando argumentos de largura e altura. */
+
+.rectangle {
+	@include size(100px, 60px);
+}
+
+.square {
+	@include size(40px, 40px);
+}
+
+/* Isso compilado ficará assim: */
+.rectangle {
+  width: 100px;
+  height: 60px;
+}
+
+.square {
+  width: 40px;
+  height: 40px;
+}
+
+
+
+/*Funções
+==============================*/
+
+
+
+/* Sass fornece funções que podem ser utilizados para realizar uma variedade de
+    tarefas. Considere o seguinte */
+
+/* Funções pode ser chamado usando seu nome e passando o
+    argumentos necessários */
+body {
+  width: round(10.25px);
+}
+
+.footer {
+  background-color: fade_out(#000000, 0.25)
+}
+
+/* Compiles to: */
+
+body {
+  width: 10px;
+}
+
+.footer {
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+/* You may also define your own functions. Functions are very similar to
+   mixins. When trying to choose between a function or a mixin, remember
+   that mixins are best for generating CSS while functions are better for
+   logic that might be used throughout your Sass code. The examples in
+   the Math Operators' section are ideal candidates for becoming a reusable
+   function. */
+
+/* This function will take a target size and the parent size and calculate
+   and return the percentage */
+
+/* Você também pode definir suas próprias funções. As funções são muito semelhantes aos
+   mixins. Ao tentar escolher entre uma função ou um mixin, lembre-
+   que mixins são os melhores para gerar CSS enquanto as funções são melhores para
+   lógica que pode ser usado em todo o seu código Sass. Os exemplos
+   seção Operadores Math 'são candidatos ideais para se tornar um reutilizável
+   função. */
+
+/* Esta função terá um tamanho de destino eo tamanho do pai e calcular
+   e voltar a percentagem */
+
+@function calculate-percentage($target-size, $parent-size) {
+  @return $target-size / $parent-size * 100%;
+}
+
+$main-content: calculate-percentage(600px, 960px);
+
+.main-content {
+  width: $main-content;
+}
+
+.sidebar {
+  width: calculate-percentage(300px, 960px);
+}
+
+/* Compila para: */
+
+.main-content {
+  width: 62.5%;
+}
+
+.sidebar {
+  width: 31.25%;
+}
+
+
+
+/* Extend (Herança)
+============================== */
+
+
+
+/*Extend é uma maneira de compartilhar as propriedades de um seletor com outro. */
+
+.display {
+	@include size(5em, 5em);
+	border: 5px solid $secondary-color;
+}
+
+.display-success {
+	@extend .display;
+	border-color: #22df56;
+}
+
+/* Compiles to: */
+.display, .display-success {
+  width: 5em;
+  height: 5em;
+  border: 5px solid #51527F;
+}
+
+.display-success {
+  border-color: #22df56;
+}
+
+/* Ampliando uma declaração CSS é preferível a criação de um mixin
+   por causa da maneira agrupa as classes que todos compartilham
+   o mesmo estilo base. Se isso for feito com um mixin, a largura,
+   altura, e a borda seria duplicado para cada instrução que
+   o chamado mixin. Enquanto isso não irá afetar o seu fluxo de trabalho, será
+   adicionar inchaço desnecessário para os arquivos criados pelo compilador Sass. */
+
+
+
+/*Assentamento
+==============================*/
+
+
+
+/ * Sass permite seletores ninhos dentro seletores * /
+
+ul {
+	list-style-type: none;
+	margin-top: 2em;
+
+	li {
+		background-color: #FF0000;
+	}
+}
+
+/* '&' será substituído pelo selector pai. */
+/* Você também pode aninhar pseudo-classes. */
+/* Tenha em mente que o excesso de nidificação vai fazer seu código menos sustentável.
+Essas práticas também recomendam não vai mais de 3 níveis de profundidade quando nidificação.
+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;
+}
+
+
+
+/*Parciais e Importações
+==============================*/
+
+
+/* Sass permite criar arquivos parciais. Isso pode ajudar a manter seu Sass
+   código modularizado. Arquivos parciais deve começar com um '_', por exemplo, _reset.css.
+   Parciais não são geradas em CSS. */
+
+
+
+/* Considere o seguinte CSS que nós vamos colocar em um arquivo chamado _reset.css */
+
+html,
+body,
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+/* Sass offers @import which can be used to import partials into a file.
+   This differs from the traditional CSS @import statement which makes
+   another HTTP request to fetch the imported file. Sass takes the
+   imported file and combines it with the compiled code. */
+
+/* Sass oferece @import que pode ser usado para importar parciais em um arquivo.
+   Isso difere da declaração CSS @import tradicional, que faz
+   outra solicitação HTTP para buscar o arquivo importado. Sass converte os
+   importadas arquivo e combina com o código compilado. */
+
+@import 'reset';
+
+body {
+  font-size: 16px;
+  font-family: Helvetica, Arial, Sans-serif;
+}
+
+/* Compiles to: */
+
+html, body, ul, ol {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-size: 16px;
+  font-family: Helvetica, Arial, Sans-serif;
+}
+
+
+
+/*Placeholder Selectors
+==============================*/  
+
+
+
+/* Placeholders are useful when creating a CSS statement to extend. If you
+   wanted to create a CSS statement that was exclusively used with @extend,
+   you can do so using a placeholder. Placeholders begin with a '%' instead
+   of '.' or '#'. Placeholders will not appear in the compiled CSS. */
+
+/* Os espaços reservados são úteis na criação de uma declaração CSS para ampliar. Se você
+   queria criar uma instrução CSS que foi usado exclusivamente com @extend,
+   Você pode fazer isso usando um espaço reservado. Espaços reservados começar com um '%' em vez
+   de '.' ou '#'. Espaços reservados não aparece no CSS compilado. * /
+
+%content-window {
+  font-size: 14px;
+  padding: 10px;
+  color: #000;
+  border-radius: 4px;
+}
+
+.message-window {
+  @extend %content-window;
+  background-color: #0000ff;
+}
+
+/* Compilado para: */
+
+.message-window {
+  font-size: 14px;
+  padding: 10px;
+  color: #000;
+  border-radius: 4px;
+}
+
+.message-window {
+  background-color: #0000ff;
+}
+
+
+
+/*Operações Math
+============================== * /
+
+
+/* Sass provides the following operators: +, -, *, /, and %. These can
+   be useful for calculating values directly in your Sass files instead
+   of using values that you've already calculated by hand. Below is an example
+   of a setting up a simple two column design. */
+
+/* Sass fornece os seguintes operadores: +, -, *, /, e %. estes podem
+   ser úteis para calcular os valores diretamente no seu Sass arquivos em vez
+   de usar valores que você já calculados pela mão. Abaixo está um exemplo
+   de uma criação de um projeto 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;
+}
+
+/* Compiles to: */
+
+body {
+  width: 100%;
+}
+
+.main-content {
+  width: 62.5%;
+}
+
+.sidebar {
+  width: 31.25%;
+}
+
+.gutter {
+  width: 6.25%;
+}
+
+
+```
+
+
+
+## SASS ou Sass?
+Alguma vez você já se perguntou se Sass é um acrônimo ou não? Você provavelmente não tem, mas vou dizer-lhe de qualquer maneira. O nome do idioma é uma palavra, "Sass", e não uma sigla.
+Porque as pessoas estavam constantemente a escrevê-lo como "SASS", o criador da linguagem de brincadeira chamou de "StyleSheets Sintaticamente Incríveis".
+
+
+## Prática Sass
+Se você quiser jogar com Sass em seu navegador, vá para [SassMeister](http://sassmeister.com/).
+Você pode usar uma sintaxe, basta ir para as configurações e selecionar Sass ou SCSS.
+
+
+## Compatibilidade
+
+Sass pode ser usado em qualquer projeto, desde que você tenha um programa para compilá-lo
+em CSS. Você vai querer verificar se o CSS que você está usando é compatível
+com os seus navegadores de destino.
+
+[QuirksMode CSS](http://www.quirksmode.org/css/) e [CanIUse](http://caniuse.com) são ótimos recursos para verificação de compatibilidade.
+
+
+## Leitura
+* [Official Documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html)
+* [The Sass Way](http://thesassway.com/) fornece tutoriais (iniciante avançados) e artigos.