CSS com SASS

Já está confortável com o CSS e deseja partir para um próximo nível? Está na hora de você aprender SASS. Dê uma olhada no curso completo de SASS aqui: https://www.origamid.com/cursos/css-com-sass/

O projeto principal do curso é o site Le Scone, e você pode conferir em: https://www.origamid.com/projetos/lescone/

SASS é um pré-processador de CSS, com ele você poderá utilizar funções de uma linguagem de programação para gerar o seu CSS final.

See the Pen 27a0e5105ffd33eb63b0929feb79dc0f by Andre Origamid (@origamid) on CodePen.

Você terá a capacidade de criar variáveis, mixins, funções, loops e mais. Abaixo eu falo das principais funções e como elas vão te ajudar.

1 – Variáveis

$roxo: #84E;
$cinza: #333333;
$tipo-1: Helvetica, Arial, sans-serif;

a {
 color: $roxo;
 font-family: $tipo-1;
}

div {
 background: $cinza;
 border: 2px solid $roxo;
}

Com o SASS você pode criar variáveis, assim como no JavaScript, e utiliza-las quantas vezes quiser no seu código. Uma vez que você sentir a necessidade de mudar o valor (por exemplo, você quer outro tom de roxo), basta mudar uma vez na variável que o valor será atualizado em todo o site.

2 – Mixins

@mixin tipografia-1 {
 font-size: 1.5em;
 line-height: 1.3;
 font-family: monospace;
 font-weight: bold;
}

h1 {
 @include tipografia-1;
}

.titulo {
 @include tipografia-1;
 margin-bottom: 20px;
}

Mixins são blocos de propriedades que você pode reaproveitar em todo o seu site. Você define o mixin uma vez e pode reutilizá-lo quantas vezes quiser.

3 – Loops

@for $i from 1 through 12 {
 $width: $i / 12 * 100%;
 grid-#{$i} {
  width: $width;
 }
}

O código acima vai gerar:

grid-1 {
  width: 8.33333%;
}

grid-2 {
  width: 16.66667%;
}

grid-3 {
  width: 25%;
}

grid-4 {
  width: 33.33333%;
}

/* E por ai vai, até o grid-12 */

Você pode utilizar loops para criar sistemas de grid sem precisar ficar fazendo o cálculo do tamanho de cada coluna na mão.

Isso foi uma pequena demonstração do poder do SASS. Vale lembrar que este é um pré-processador, isso significa que você terá um compilador rodando no seu computador que vai gerar um arquivo .css sempre que você salvar o seu arquivo de SASS.

Ou seja, ao final disso tudo um arquivo .css é gerado e é este arquivo que será utilizado no seu site.

Existem 2 formas de se escrever SASS, uma é a sintaxe original do SASS e a outra é SCSS, a que eu utilizei aqui (e também a mais comum), é a SCSS que é totalmente similar a forma original de se escrever CSS.

Não se esqueça de conferir o curso. Lembrando que o acesso dele é liberado para todos os assinantes da Origamid (se você ainda não é assinante, é possível assistir até 3 aulas gratuitas).