Sass: o CSS com super poderes

O que é Sass?

Sass é uma sigla para Syntactically Awesome StyleSheet, que traduzindo de forma livre fica folhas de estilo com uma sintaxe incrível. Basicamente, o Sass funciona como um super CSS, ou como eu prefiro chamar o CSS com super poderes. Ele é uma extensão do CSS que atráves de um pré-processador compila e gera arquivos CSS puros. Feito para reduzir as repetições e salvar tempo. O Sass adiciona recursos novos ao CSS como variáveis, funções, herança, importações, entre outras coisas.

Sass vs SCSS

A diferença entre arquivos Sass e SCSS é a escrita, enquanto os arquivos SCSS utilizam da escrita similar ao do CSS, usando chaves e ponto e vírgulas, o Sass marca sua linhas atráves da indentação. Os dois possuem as mesmas funcionalidades, a única coisa que os diferencia é a escrita, a equipe pode escolher qual dos dois formatos de arquivo prefere. Código SCSS:

div {
	color: red;
}

Mesmo código em Sass:

div 
	color: red

Variáveis

As variáveis no Sass são marcadas igual ocorrem em diversas linguagens, usando o prefixo $ (cifrão).

$nome_da_variavel: value;

$primary: #0000ff;
$radius: 12px;
div {
  border-radius: $radius;
  color: $primary;
}

!global

O !global defini que é uma variável de escopo global.

div {
  $primary: red; // somente para esse escopo
  color: $primary 
}
p {
  $primary: blue !global; // escopo global 
  color: $primary;
}
h1 {
  color: $primary; // retorno da variável de escopo global
}

Nested rules

O Sass permite utilizar os mesmos seletores do CSS, porém tem formas alternativas de selecionar os elementos. No CSS

div {
  width: 500px;
} 
div:hover {
  width: 525px;
}
div p {
  text-align: center;
  text-transform: lowercase;
  text-overflow: hidden;
}

Mesmo código no SCSS

div {
  width: 500px;
  
  &:hover {
    width: 525px;
  }
  
  p {
    text: {
      align: center;
      transform: lowercase;
      overflow: hidden;
    }
  }
}

Import

O import do Sass funciona do mesmo modo do CSS, porém não cria uma requisição HTTP igual ao CSS, o import do Sass soma ao arquivo CSS nativamente sem uma requisição.

@import "filename";

Partials

Os partials são arquivos dos quais não são compilados para CSS, eles são usados somente para serem importados dentro de um arquivo que será compilado. Para definir um partials você deve colocar um underline anterior ao nome do arquivo.

// _colors.scss
$pink: #EE82EE;
$blue: #4169E1;
$green: #8FBC8F;

// style.scss
@import "_colors";
div {
  color: $blue;
  background: $pink;
  border: 1px solid $green;
}

@mixin e @include

Mixin's são frações de código que poderão ser reutilizadas e os includes é o que permite utilizar os mixin’s.

@mixin emphasis {
  color: red;
  background: yellow;
  font-weight: bold;
}
div {
  @include emphasis;
  width: 500px;
}
p {
  @include emphasis;
  font-size: 20px;
}

Variáveis no mixin

Os mixin's também permitem você passar variáveis para dentro dele.

@mixin border($color) {
  border: 2px solid $color;
}
div {
  @include border(black);
}

@extend

A função extend, como já subentende-se no nome, permite você estender uma outra classe.

.button {
  border: 1px solid black;
  background: orange;
  color: white;
}
.large-button {
  @extend .button;
  width: 500px;
}