Aprenda X em Y Minutos

// 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 está escrevendo o mesmo código para mais de um
elemento, você pode 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;
}

/* Após 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);
}

/* 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 na 
   seção "Operações Math" são candidatos ideais para se tornar um função 
   reutilizável. */

/* Esta função terá um tamanho de destino e o tamanho do pai (parent), 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;
}

/* Ao ampliar uma declaração CSS é preferível a criação de um mixin,
   por causa da maneira em que agrupa as classes com todos que 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á
   adicionado 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 (parent). */
/* 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 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 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
   arquivo importados 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;
}



/* Placeholder Selectors
==============================*/  


/* Os Placeholders são úteis na criação de uma declaração CSS para ampliar. Se você
   deseja criar uma instrução CSS que foi usado exclusivamente com @extend,
   você pode fazer isso usando um Placeholder. Placeholder começar com um '%' em vez
   de '.' ou '#'. Placeholder 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 fornece os seguintes operadores: +, -, *, /, e %. estes podem
   ser úteis para calcular os valores diretamente no seu arquivos Sass em vez
   de usar valores que você já calcula manualmente. O exemplo abaixo é
   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%;
}