Matheus Castiglioni

Dando Poderes Ao Css Com Sass Parte 01

Pois é, se você leu o título e achou estranho fique tranquilo, a ideia é transformar nosso CSS em um super herói com super poderes:

CSS with superpowers

Como podem ver, esse é o slogan que o próprio SASS usa, “CSS com super poderes”.

O que é SASS?

SASS é uma linguagem de extensão para o CSS, com ela conseguimos escrever códigos que não seriam possíveis apenas com CSS puro, por isso, eles costumam chamar esses recursos (features) ou extensões adicional de “super poderes”.

A ideia do post não é focar muito em “o que é” e sim “o que faz”, portanto, caso deseja saber mais informações sobre o SASS, sugiro acessar a página oficial.

Instalando o SASS

Para não extender mais o post não irei abordar a forma de instalar o SASS em sua máquina, pois, a mesma pode ser feita de diferentes formas baseando-se no sistema operacional a ser utilizado.

Para realizar a instalação do SASS, leia a documentação e escolha de acordo com seu sistema operacional, acredito que o processo não deve ser complicado, basta seguir as instruções.

Escrevendo nosso primeiro código

Para escrever códigos utilizando a linguagem (vou chamar de linguagem por questões de facilidade) SASS devemos criar arquivos com duas extensões diferentes, sendo elas: .sass ou .scss, agora, com toda certeza do mundo você deve estar se perguntando:

Porque duas extensões diferentes? Qual a diferença entre elas? Qual eu devo utilizar?

Entendendo a diferença de extensões

Basicamente a única diferença entre as extensões .sass e .scss é referente a sintaxe, os arquivos .scss são bem parecidos com os .css, com chaves e pontos e virgulas, porém, os arquivos .sass não utilizam chaves ou pontos e virgulas, veja um exemplo:

Abaixo um exemplo de um arquivo utilizando a sintaxe do .sass:

.botao
    background: #00FF99
    border: 1px solid #DCDCDC
    border-radius: 5px
    color: #FDFDFD
    padding: .5rem 1.2rem

Agora um arquivo utilizando a sintaxe do .scss:

.botao {
    background: #00FF99;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    color: #FDFDFD;
    padding: 0.5rem 1.2rem;
}

Essa é a diferença entre ambos, o modo de escrever, um parece bastante com o CSS normal, enquanto o outro fica um pouco mais diferente, porém, ambos podem utilizar todo o poder que o SASS tem a nos oferecer.

Para continuar o exemplo do post vou abordar a sintaxe do .sass.

Executando o SASS

Para executar o SASS devemos acessar o terminal (mac ou linux) ou cmd (windows), o mesmo pode ser executado de duas maneiras diferentes:

Compilando

Apenas para compilar um arquivo em SASS podemos utilizar sass ARQUIVO.[sass ou scss], seguido por dois pontos (:) e pelo nome do arquivo de saída, assim o mesmo será compilado para um ou mais arquivos .css.

sass ARQUIVO.[sass ou scss]:Nome_do_arquivo.css

Compilando e observando

O exemplo anterior apenas compila e finaliza, para continuar escutando modificações nos arquivos devemos passar o parâmetro --watch, ficando da seguinte maneira:

sass ARQUIVO.[sass ou scss]:Nome_do_arquivo.css --watch

Compilando em arquivo mínificado

Podemos também já pedir para o SASS gerar um arquivo .css mínificado:

sass ARQUIVO.[sass ou scss]:Nome_do_arquivo.css --watch --style compressed

Conhecendo os poderes do SASS

Agora vamos começar a ver os poderes que o SASS introduz a linguagem CSS, vou mostrá-los de forma separada, sendo assim, ao término do post você deve ser capaz de mesclá-los e formar seus arquivos.

Variáveis

Um dos grandes poderes do SASS é a utilização de variáveis (eu sei que hoje em dia podemos utilizar tal recurso apenas com CSS puro):

$cor: #FDFDFD

.botao
    background: #00FF99
    border: 1px solid #DCDCDC
    border-radius: 5px
    color: $cor
    padding: .5rem 1.2rem

Vejam que devemos seguir a seguinte sintaxe:

Criando a variável

Para criar a variável devemos utilizar o cifrão ou dolar ($) seguido pelo seu nome, dois pontos (:) e seu valor:

$NOME_VARIAVEL: VALOR

Lendo variável

Para ler o valor armazenado em uma variável, precisamos apenas informar o seu nome seguido pelo cifrão ou dolar ($):

$NOME_VARIAVEL

Obs: Uma observação sobre as variáveis é que elas possuem escopo, portanto:

Código válido:

$cor: #FDFDFD

.botao
    background: #00FF99
    border: 1px solid #DCDCDC
    border-radius: 5px
    color: $cor
    padding: .5rem 1.2rem

Código inválido:

.botao
    $cor: #FDFDFD
    background: #00FF99
    border: 1px solid #DCDCDC
    border-radius: 5px
    color: $cor
    padding: .5rem 1.2rem

.outro-botao
    color: $cor

A variável cor existe apenas no escopo do .botao.

Nested Rules

Tenho toda certeza do mundo que você já viu, leu ou escreveu um código CSS parecido com:

.menu {
    align-items: center;
    display: flex;
}
.menu__list {
    display: inline-block;
}
.menu__item {
    margin-right: .5rem;
}
.menu__link {
    display: block;
}

Veja o tanto de repetições da classe .menu, será que não existe algo menos verboso? Pois dessa maneira, se um dia precisarmos mudar o nome da classe de nosso menu, deveremos procurar onde estamos à informando e substituí-la pelo seu novo valor.

Pensando nisso o pessoal do SASS criou o Nested Rules, poderíamos substituir o código anterior por:

.menu
    align-items: center
    display: flex
    &__list
            display: inline-block
    &__item
            margin-right: .5rem
    &__link
            display: block

Como pode ver, declaramos a classe pai apenas uma vez, nesse caso a nossa classe .menu, depois utilizamos o & para informar filhos de .menu, repare que os filhos devem ser informados seguindo a indentação do código, ou seja, deve ser informado dentro de .menu.

O Nested Rule também pode ser utilizado com pseudo classes (pseudo-class) ou pseudo elementos (pseudo-elements):

.menu__link {
    display: block;
}
.menu__link:hover {
    color: #00CC99;
}

Poderíamos facilmente trocar por:

.menu
    &__link
            display: block
    &:hover
            color: #00CC99

Ainda teríamos o mesmo resultado.

Nested Properties

No exemplo anterior aprendemos a declarar elementos pais e filhos, mas, também podemos seguir a mesma ideia com atríbutos:

.botao {
    font-family: Arial;
    font-size: 1.2rem;
    font-weight: bold;
}

Aqui, veja novamente o quanto esse código pode ser melhorado, estamos repetindo muitas vezes a palavra font-, será que não podemos fazer da mesma maneira, ou seja, definir um pai e informar os filhos? Sim, isso é chamado de Nested Properties:

.botao
    font:
        family: Arial
        size: 1.2rem
        weight: bold

Ambos os códigos possuem o mesmo resultado visual.

Herdando atributos

Se você conhece linguagens orientadas á objetos, com certeza já deve ter ouvido falar em herança, pois é, com SASS também podemos fazer uso de tal recurso (poder), imagine que temos o esqueleto de um botão seguido por seus estilos:

.botao {
    border: 1px solid transparent;
    border-radius: 5px;
    display: inline-block;
    font-size: .9rem;
    padding: .5rem .75rem;
}
.botao--verde {
    background: #00FF00;
    border-color: #00FF00;
}
.botao--vermelho {
    background: #FF0000;
    border-color: #FF0000;
}

Esse código irá funcionar sem problemas, porém em nosso HTML será necessário informar duas vezes as classes do botão, uma para o esqueleto e outra para o estilo, conhecido como CSS Orientado à Objetos

<button class="botao botao--verde">Verde</button>
<button class="botao botao--vermelho">Vermelho</button>

Com o SASS podemos facilmente diminuir o código à seguir:

$vermelho: #FF0000
$verde: #00FF00

.botao
    border: 1px solid transparent
    border-radius: 5px
    display: inline-block
    font-size: .9rem
    padding: .5rem .75rem
    &--vermelho
            @extend .botao
            background: $vermelho
            border-color: $vermelho
    &--verde
            @extend .botao
            background: $verde
            border-color: $verde

Veja que estamos utilizando @extend, assim, dizemos para ele herdar todos os atributos de uma determinada classe, em nosso caso, estamos herdando de .botao.

Agora em nosso HTML, precisamos adicionar apenas uma classe referente aos nossos botões, pois a mesma já possuí todos os atríbutos da herdada:

<button class="botao--verde">Verde</button>
<button class="botao--vermelho">Vermelho</button>

Importando arquivos

Se você já fez algum site ou práticou um pouco de HTML e CSS, já deve ser deparado com a seguinte situação:

<link href="arquivo1.css" rel="stylesheet" type="text/css" />
<link href="arquivo2.css" rel="stylesheet" type="text/css" />
<link href="arquivo3.css" rel="stylesheet" type="text/css" />

Estamos tendo múltiplos arquivos importados em nosso HTML, com SASS poderíamos possuir os imports em um único arquivo:

@import arquivo1
@import arquivo2
@import arquivo3

Veja que não informamos a extensão .sass nos imports, porque a extensão é opcional, o próprio SASS sabe que deve importar um arquivo com extensão .sass ou .scss.

Para o post não ficar muito extenso vou parar por aqui, nos próximos posts irei abordando mais poderes do SASS.

Caso queira treinar ou praticar a sintaxe do SASS, existe um editor e compilador online chamado SassMeister.

E você, já conhecia o SASS? Não deixe de comentar.