Superpoderes no CSS com SASS

09/10/2018 - 9 mins de leitura

O que é SASS?

O SASS é um pré-processador de CSS, estendendo a linguagem e disponibilizando funcionalidades como variáveis, mixins, funções. SASS é CSS com superpoderes.

Instalando o SASS

Crie uma pasta para armazenar o projeto e acesse-a:

mkdir introducao_sass
cd introducao_sass

Crie um projeto Node:

npm init -y

Faça a instalação global do Gulp CLI:

sudo npm install -g gulp-cli

Instale as dependências do projeto:

npm install --save-dev gulp
npm install --save-dev gulp-sass

Crie a seguinte estrutura no seu projeto:

dist
  assets
    css
      estilo.css
    index.html
src
  assets
    css
      estilo.scss
      base
        normalize.scss
      helpers			
        variaveis.scss
        mixins.scss
        placeholder
      layout
        cabecalho.scss
        geral.scss
        corpo.scss
        rodape.scss
.gitignore
gulpfile.js

Crie o arquivo gulp-file.js, que será responsável por transpilar o código escrito em SASS para CSS, e deixe o código da seguinte forma:

var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  return gulp.src('./src/assets/css/estilo.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/assets/css'));
});

gulp.task('watch', function () {
    gulp.watch('./src/assets/css/**/*.scss', ['sass']);
});

Variáveis

Imagine que você precise declare duas cores para utilizar em seu projeto, e estas serão utilizadas em diversas classes CSS. O que acontece quando precisa alterar uma dessas cores? Eventualmente, precisa alterar cada classe que a utiliza. Para resolver este tipo de problema o SASS possui as variáveis, que podem ser declaradas da seguinte forma:

$cor-principal: #EE7790;
$raio: 0.5em;
$borda: 1px;

Agora veja como podemos utilizar variáveis no código:

.titulo{
	background-color: $cor-principal;
	border: 1px solid $borda;
}

Sendo gerado o seguinte CSS:

.titulo {
  background-color: #EE7790;
  border: 1px solid 1px; }

Mixins

Os mixins são utilizados para reutilização de trechos de código repetidos. Declaramos da seguinte forma:

@mixin borda-arredondada{
	-webkit-border-radius: $raio;
	border-radius: $raio;
}

E podemos utiliza-los assim:

.titulo{
	background-color: tomato;
	color: white;
	@include borda-arredondada;
}

O CSS gerado será o seguinte:

.titulo{
	background-color: tomato;
	color: white;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}

Os mixins também podem receber parâmetros, veja:

@mixin borda-arredondada($raio){
	-webkit-border-radius: $raio;
	border-radius: $raio;
}

Utilizando um mixin com parâmetros:

@include borda-arredondada(5px);

Você também pode utilizar um valor padrão para o parâmetro:

@mixin borda-arredondada($raio: 0.3em){
	-webkit-border-radius: $raio;
	border-radius: $raio;
}

Utilizando o mixin declarado sem informar parâmetros, ou seja, utilizando o valor padrão definido:

@include borda-arredondada;

Comentários

Para utilizar comentários somente no arquivo SCSS utilize:

// Declaração dos mixins

Caso queira que o comentário apareça no arquivo gerado utilize o padrão do CSS:

/* Cabeçalho */

Aninhamento

O aninhamento auxilia no gerenciamento de código, observe a declaração:

.menu{
	background-color: #EE4400;

	ul{
		list-style: none;
	}

	li{
		padding: 10px;
	}
}

Assim, estou definindo uma classe .menu, e dentro dessa classe uma declaração de elementos ul e li. Sendo gerado o seguinte CSS:

.menu{ background-color: #EE4400; }
.menu ul{ list-style: none; }
.menu ul li{ padding: 10px; }

O aninhamento também funciona com herança do nome dos seletores:

a{
	color: white;
	text-decoration: none;
	
	&:hover{
		text-decoration: underline;
	}
}

Gerando o seguinte CSS:

a{ color: white; text-decoration: none; }
a:hover{ text-decoration: underline; }

O & herda o valor do setor pai, nesse caso era o a.

Imports

Você pode dividir as seções de um layout, como cabeçalho, corpo e rodapé, separando em arquivos e com o SASS juntar esses arquivos, melhorando assim, a organização do seu código.

Para importar faça o seguinte:

@import 'variaveis.scss';
@import 'geral.scss';
@import 'cabecalho.scss';

O import pode ser utilizado sem a extensão do arquivo, caso seja .scss:

@import 'rodape';

E para organizar melhor podemos utilizar sub-pastas:

@import 'helpers/variaveis';
@import 'helpers/mixins';
@import 'layout/contato';
@import 'layout/sobre';

Obs.: como boa prática caso tenha arquivos .css renomeio-os para .scss antes de importar.

Placeholder

Para entender o placeholder observe as declaraçes:

%sombra-padrao {
	box-shadow: 0 2px 6.65px 0.35px rgba(0, 0, 0, 0.3);
}

Utilizando o placeholder:

.titulo{
	background-color: tomato;
	color: white;
	@extend %sombra-padrao;
}

Os mixins reutilizam o código dentro da declaração, enquanto o placeholder criam uma classe separada, veja:

/* utilizando mixins */
.titulo{
	background-color: tomato;
	color: white;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}

/* utilizando placeholder */
.titulo{
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}

.titulo{
	background-color: tomato;
	color: white;
}

Aparentemente não há nenhuma vantagem, mas veja a comparação do resultado entre o uso de mixins e placeholder:

/* utilizando mixins */
.titulo{
	background-color: tomato;
	color: white;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}
.subtitulo{
	background-color: #77A900;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}

/* utilizando placeholder */
.titulo{
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}
.subtitulo{
	background-color: #77A900;
}

.titulo, .subtitulo{
	background-color: tomato;
	color: white;
}

Observe que o código do placeholder é reutilizado, enquanto o código do mixin é duplicado. A limitação é que o placeholder não pode receber parâmetros.

Media queries

Também é possível utilizar o SASS para organizar os media queries com aninhamento:

.titulo{

	text-align: left;

	@media (max-width: 980px){
		text-align: center;	
	}
}

Será gerado o seguinte CSS:

.titulo{ text-align: left; }
@media (max-width: 980px){
	.titulo{
		text-align: center;
	}
}

Operações matemáticas

O SASS também suporta operações matemáticas:

.titulo{
	font-size: 3 * 2px;
}

Será gerado o seguinte CSS:

.titulo{
	font-size: 6px;
}

Também podemos utilizar variáveis:

$fonte-padrao: 2px;
.titulo{
	font-size: 3 * $fonte-padrao;
}

Funções

Imagine a seguinte situação: você precisa calcular a largura dos elementos com base em uma fonte padrão, informando assim, um fator multiplicador. Para resolver essa situação você pode criar uma função no SASS:

@function calcular-largura($multiplicador){
	@return $multiplicador * $fonte-padrao;
}

Utilizando a função:

.imagens{
	width: calcular-largura(3); 
}

Cores

O SASS também têm funções bem interessantes para trabalharmos com cores:

// Deixar a cor 15% mais clara
lighten($cor-principal, 15%);

// Deixar a cor 15% mais escura
darken($cor-principal, 15%);

// Escala de cinza
grayscale($cor-principal);

// Cor inversa
invert($cor-principal); 

// Cor complementar
complement($cor-principal);