Translate exercises to pt-br

exercises/each/problem.pt-br.md

@@ -0,0 +1,41 @@
+# ITERADOR EACH
+
+A diretiva `@each` geralmente tem a forma `@each $var in <lista ou mapa>`. `$var` pode ter qualquer nome de variável, como `$length` ou `$name`, e `<lista ou mapa>` é uma expressão SassScript que retorna uma lista ou mapa.
+
+A regra `@each` define `$var` para cada item da lista ou mapa, então retorna os estilos que contém usando o valor de `$var`. Por exemplo:
+
+```scss
+@each $animal in puma, sea-slug, egret, salamander {
+  .#{$animal}-icon {
+    background-image: url('/images/#{$animal}.png');
+  }
+}
+```
+
+é compilado para:
+
+```css
+.puma-icon {
+  background-image: url('/images/puma.png'); }
+.sea-slug-icon {
+  background-image: url('/images/sea-slug.png'); }
+.egret-icon {
+  background-image: url('/images/egret.png'); }
+.salamander-icon {
+  background-image: url('/images/salamander.png'); }
+```
+
+# EXERCÍCIO
+
+Escreva um script Sass que gera regras para os seletores `.#{$big-cat}-picture`, onde `$big-cat` é um dos 'cheetah', 'puma', 'jaguar', 'panther', 'tiger', 'leopard', e defina seu `padding` para '3em'.
+
+--
+## DICAS
+
+Para criar uma folha de estilo em Sass (SCSS), crie um arquivo com a extensão `.scss` e comece a escrever SCSS. Quando estiver pronto, você deve executar:
+
+```sh
+$ {appname} verify stylesheet.scss
+```
+
+para prosseguir. Sua folha de estilo será testada, um relatório será gerado, e a lição será marcada como 'completada' se você tiver feito tudo corretamente.

exercises/extend_inheritance/problem.pt-br.md

@@ -0,0 +1,64 @@
+# EXTENSÕES/HERANÇA
+
+Essa é uma das funcionalidades mais úteis do Sass. Usar `@extend` te permite compartilhar um conjunto de propriedades CSS de um seletor pra outro. Isso te ajuda a não repetir código. Em nosso exemplo iremos criar uma simples série de mensagens para erros, avisos e sucesso.
+
+```scss
+.message {
+  border: 1px solid #ccc;
+  padding: 10px;
+  color: #333;
+}
+
+.success {
+  @extend .message;
+  border-color: green;
+}
+
+.error {
+  @extend .message;
+  border-color: red;
+}
+
+.warning {
+  @extend .message;
+  border-color: yellow;
+}
+```
+
+O que o código acima faz é permitir que você deixe as propriedades CSS em `.message` e aplique as mesmas em `.success`, `.error`, e `.warning`. A mágica acontece com o CSS gerado, e isso ajuda a evitar escrever múltiplas classes nos elementos HTML. O resultado é esse:
+
+```css
+.message, .success, .error, .warning {
+  border: 1px solid #cccccc;
+  padding: 10px;
+  color: #333;
+}
+
+.success {
+  border-color: green;
+}
+
+.error {
+  border-color: red;
+}
+
+.warning {
+  border-color: yellow;
+}
+```
+
+# EXERCÍCIO
+
+Escreva uma regra para o seletor `.push-button` com `background-color: blue`, e uma regra para o seletor `.main-button` que será extendida de `.push-button`, e defina `font-weight: bold` para a mesma.
+
+--
+## DICAS
+
+Para criar uma folha de estilo em Sass (SCSS), crie um arquivo com a extensão `.scss` e comece a escrever SCSS. Quando estiver pronto, você deve executar:
+
+```sh
+$ {appname} verify stylesheet.scss
+```
+
+para prosseguir. Sua folha de estilo será testada, um relatório será gerado, e a lição será marcada como 'completada' se você tiver feito tudo corretamente.
+

exercises/for_loop/problem.pt-br.md

@@ -0,0 +1,37 @@
+# LAÇO FOR
+
+A diretiva `@for` repetidamente retorna um conjunto de estilo. Pra cada repetição, uma variável contador é usada para alterar seu retorno. A diretiva tem duas formas: `@for $var from <começo> through <fim>` e `@for $var from <começo> to <fim>`. Note a diferença nas palavras-chave `through` e `to`. `$var` pode ter qualquer nome de variável, como `$i`; `<começo>` e `<fim>` são expressões SassScript que devem retornar inteiros. Quando `<começo>` é maior que `<fim>` o contador será decrementado invés de incrementado.
+
+O `@for` define $var para cada número consecutivo específicado na variação e a cada vez retorna estilos aninhados usando o valor de `$var`. Com a forma `form ... through`, a variação _inclui_ os valores de `<começo>` e `<fim>`, mas na forma `from ... to` o valor de `<fim>` _não é incluído_. Usando a síntaxe `through`,
+
+```scss
+@for $i from 1 through 3 {
+  .item-#{$i} { width: 2em * $i; }
+}
+```
+
+é compilado para:
+
+```css
+.item-1 {
+  width: 2em; }
+.item-2 {
+  width: 4em; }
+.item-3 {
+  width: 6em; }
+```
+
+# EXERCÍCIO
+
+Escreva regras para os elementos `h1` até `h6` que defina seu `font-size` para `24px` menos `3px` vezes o level do cabeçalho, por exemplo, `h1` terá `font-size` de `24px - 3px * 1` que é igual a `21px`, usando a diretiva `@for`.
+
+--
+## DICAS
+
+Para criar uma folha de estilo em Sass (SCSS), crie um arquivo com a extensão `.scss` e comece a escrever SCSS. Quando estiver pronto, você deve executar:
+
+```sh
+$ {appname} verify stylesheet.scss
+```
+
+para prosseguir. Sua folha de estilo será testada, um relatório será gerado, e a lição será marcada como 'completada' se você tiver feito tudo corretamente.

exercises/imports/problem.pt-br.md

@@ -0,0 +1,57 @@
+# IMPORTS
+
+CSS tem uma opção de importação que permite você dividir seu código em pequenas partes, em porções que podem ser mantidas melhor. A única desvantagem é que cada vez que você usar `@import` no CSS ele cria uma requisição HTTP. Sass criou algo semelhante sobre o `@import` atual do CSS, mas ao invés de requerir uma requisição HTTP, Sass pegará os arquivos que deseja importar e combinar com o arquivo que o está importando, assim você fornecerá apenas um arquivo CSS ao navegador.
+
+Digamos que você tenha alguns arquivos Sass, \_reset.scss e base.scss. Nós queremos importar o \_reset.scss para base.scss.
+
+```scss
+// _reset.scss
+
+html,
+body,
+ul,
+ol {
+   margin: 0;
+  padding: 0;
+}
+```
+
+```scss
+// base.scss
+
+@import 'reset';
+
+body {
+  font: 100% Helvetica, sans-serif;
+  background-color: #efefef;
+}
+```
+
+Perceba que estamos usando `@import 'reset';` no arquivo base.scss. Quando você importa um arquivo você não precisa incluir sua extensão. O Sass é inteligente e irá descobrir isso pra você. Quando você gerar seu CSS terá:
+
+```css
+html, body, ul, ol {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font: 100% Helvetica, sans-serif;
+  background-color: #efefef;
+}
+```
+
+# EXERCÍCIO
+
+Escreva um arquivo que contenha uma variável `$color` e defina seu valor a '#ff0000', e uma folha de estilo que importa esse arquivo, então use a variável para definir a propriedade `color` do elemento body.
+
+--
+## DICAS
+
+Para criar uma folha de estilo em Sass (SCSS), crie um arquivo com a extensão `.scss` e comece a escrever SCSS. Quando estiver pronto, você deve executar:
+
+```sh
+$ {appname} verify stylesheet.scss
+```
+
+para prosseguir. Sua folha de estilo será testada, um relatório será gerado, e a lição será marcada como 'completada' se você tiver feito tudo corretamente.

exercises/interpolation/problem.pt-br.md

@@ -0,0 +1,50 @@
+# INTERPOLAÇÃO
+
+Você também pode usar variáveis SassScript nos seletores e nomes de propriedade usando a síntaxe de interpolação `#{}`:
+
+```scss
+$name: foo;
+$attr: border;
+p.#{$name} {
+  #{$attr}-color: blue;
+}
+```
+
+é compilado para:
+
+```css
+p.foo {
+  border-color: blue; }
+```
+
+Também é possível usar `#{}` para usar SassScript nos valores das propriedades. Na maioria dos casos isso não é melhor do que usar variáveis, mas usar `#{}` significa que qualquer operação próxima será tratada como CSS puro. Por exemplo:
+
+```scss
+p {
+  $font-size: 12px;
+  $line-height: 30px;
+  font: #{$font-size}/#{$line-height};
+}
+```
+
+é compilado para:
+
+```css
+p {
+  font: 12px/30px; }
+```
+
+# EXERCÍCIO
+
+Defina uma variável `$selector` com o valor 'article'. Então escreva uma regra usando o valor interpolado de `$selector` como um seletor, com a propriedade `color` para `#f00`. 
+
+--
+## DICAS
+
+Para criar uma folha de estilo em Sass (SCSS), crie um arquivo com a extensão `.scss` e comece a escrever SCSS. Quando estiver pronto, você deve executar:
+
+```sh
+$ {appname} verify stylesheet.scss
+```
+
+para prosseguir. Sua folha de estilo será testada, um relatório será gerado, e a lição será marcada como 'completada' se você tiver feito tudo corretamente.

exercises/mixin_content/problem.pt-br.md

@@ -0,0 +1,45 @@
+# CONTEÚDO DO MIXIN
+
+Passando blocos de conteúdo para o Mixin
+
+É possível passar blocos de estilo pelo mixin que serão colocados dentro do estilo incluído pelo mixin. O estilo aparecerá no lugar das diretivas `@content` encontradas no mixin. O que torna possível definir abstrações relativas a construção de seletores e diretivas.
+
+Por exemplo:
+
+```scss
+@mixin apply-to-ie6-only {
+  * html {
+    @content;
+  }
+}
+@include apply-to-ie6-only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+```
+
+Gera:
+
+```css
+* html #logo {
+  background-image: url(/logo.gif);
+}
+```
+
+Nota: quando a diretiva `@content` for específicada mais de uma vez ou num loop, o bloco de estilo é duplicado a cada chamada.
+
+# EXERCÍCIO
+
+Modifique o mixin `border-thickness` do exercício anterior para também aceitar a diretiva `@content`, e chame-a passando uma regra que defina a propriedade `border-style` do elemento `img` para `solid`.
+
+--
+## DICAS
+
+Para criar uma folha de estilo em Sass (SCSS), crie um arquivo com a extensão `.scss` e comece a escrever SCSS. Quando estiver pronto, você deve executar:
+
+```sh
+$ {appname} verify stylesheet.scss
+```
+
+para prosseguir. Sua folha de estilo será testada, um relatório será gerado, e a lição será marcada como 'completada' se você tiver feito tudo corretamente.

exercises/mixins/problem.pt-br.md

@@ -0,0 +1,40 @@
+# MIXINS
+
+Algumas coisas no CSS são um pouco tediantes de escrever, especialmente com CSS3 e seus tantos vendors (prefíxos). Um mixin permite você criar grupos de declaração CSS que você queira reusar pelo site. Você pode até passar parâmetros para torná-lo mais flexível. Um bom uso de mixin é para os vendors. Aqui está um exemplo de border-radius.
+
+```scss
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+      -ms-border-radius: $radius;
+          border-radius: $radius;
+}
+
+.box { @include border-radius(10px); }
+```
+
+Para criar um mixin você deve usar a diretiva `@mixin` e dar a ela um nome. Nós chamamos nosso mixin de `border-radius`. Nós também estamos usando a variável `$radius` dentro de parênteses, assim podemos passar o valor que desejarmos. Depois de criar seu mixin, você pode usá-lo como uma declaração CSS usando `@include` seguido de seu nome. Quando seu CSS for gerado, ele se parecerá com isso:
+
+```css
+.box {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  border-radius: 10px;
+}
+```
+
+# EXERCÍCIO
+
+Faça um mixin `border` que aceita uma variável `$thickness` e defina a propriedade `border-width` ao valor de `$thickness`. Então, inclua esse mixin como regra para o elemento `img`, e defina a espessura da borda para `10px`.
+
+--
+## DICAS
+
+Para criar uma folha de estilo em Sass (SCSS), crie um arquivo com a extensão `.scss` e comece a escrever SCSS. Quando estiver pronto, você deve executar:
+
+```sh
+$ {appname} verify stylesheet.scss
+```
+
+para prosseguir. Sua folha de estilo será testada, um relatório será gerado, e a lição será marcada como 'completada' se você tiver feito tudo corretamente.

exercises/nested_properties/problem.pt-br.md

@@ -0,0 +1,56 @@
+# PROPRIEDADES ANINHADAS
+
+CSS tem algumas poucas propriedades que estão em "namespaces", por exemplo, `font-family`, `font-size`, e `font-weight` estão todas no namespace `font`. No CSS, se você quiser definir várias propriedades no mesmo namespace, você tem que digitar isso toda vez. Sass fornece um atalho pra isso: apenas escreva o namespace uma vez, então aninhe as sub-propriedades nele. Por exemplo:
+
+```scss
+.funky {
+  font: {
+    family: fantasy;
+    size: 30em;
+    weight: bold;
+  }
+}
+```
+
+é compilado para:
+
+```css
+.funky {
+  font-family: fantasy;
+  font-size: 30em;
+  font-weight: bold; }
+```
+
+A própria namespace pode ter um valor. Por exemplo: 
+
+```scss
+.funky {
+  font: 20px/24px fantasy {
+    weight: bold;
+  }
+}
+```
+
+é compilado para:
+
+```css
+.funky {
+  font: 20px/24px fantasy;
+    font-weight: bold;
+}
+```
+
+# EXERCÍCIO
+
+Defina um seletor `.sassy`, e use o aninhamento de propriedades para definir o `border-width` para '10px', `border-color` para 'red' e `border-radius` para '5px'.
+
+--
+## DICAS
+
+Para criar uma folha de estilo em Sass (SCSS), crie um arquivo com a extensão `.scss` e comece a escrever SCSS. Quando estiver pronto, você deve executar:
+
+```sh
+$ {appname} verify stylesheet.scss
+```
+
+para prosseguir. Sua folha de estilo será testada, um relatório será gerado, e a lição será marcada como 'completada' se você tiver feito tudo corretamente.