Nessa semana aprenderemos sobre pré-processadores, utilizando como base o exercício do Mundo Gelado. Conforme formos aprendendo, as branches de cada aula serão atualizadas com os conteúdos vistos.
Nessa aula pegaremos o execício do Mundo Gelado e analisaremos, tirando qualquer dúvida que ainda sobrou sobre CSS. Após isso começaremos a ver um pouco sobre pré-processadores, utilizando na prática o SCSS, aprendendo da instalação até alguns conceitos como:
Nessa aula aprendemos sobre:
Finalização dos conteúdos de SASS:
Utilizamos o pré-processador SASS com a sintáxe .scss para poder aproveitar das vantagens desse recurso, mas quais são as vantagens ?
- Utilizar funcionalidades que o css puro não suporta, como: variáveis, aninhamento, mixins, funções, imports, extends.
- Evitar duplicação de código
- Facilidade de código limpo
- Manutenção de código
Podemos utilizar dois gerenciadores de pacote para fazer a instalação do SASS.
- gem, baixando o rubyinstaller.
- npm, baixando o node.
Para verificar se a instalação ocorreu bem é só escrevergem --versionounpm --versionno terminal, o resultado será a versão instalada:
Após isso é só escrever gem install sass ou npm install -g sass e utilizar o --version para verificar se a instalação foi concluída:
Para gerar o arquivo scss da raiz do projeto podemos fazer o seguinte comando no terminal:
sass {pasta do scss}/{nome do arquivo scss}.scss:{pasta onde você quer que o arquivo css seja gerado}/{nome do arquivo css que você quer que seja gerado}.css
EX:
sass scss/style.scss:css/style.css
E para que qualquer modificação gere um .css enquanto você edita o arquivo scss é só utilizar o --watch
sass --watch {pasta do scss}/{nome do arquivo scss}.scss:{pasta onde você quer que o arquivo css seja gerado}/{nome do arquivo css que você quer que seja gerado}.css
EX:
sass --watch scss/style.scss:css/style.css
SCSS:
CSS:
SCSS:
CSS:
Sem parametros:
Com parametros:
Com parametros e valor padrão:
Para mais exemplos de mixins
Para modularizar nosso código e deixar mais fácil de configurar, conseguimos separar em arquivos chamados partials, que são pedaços de css separados em arquivos e que recebem um _ no começo do nome, para que o sass entenda que não deve gerar o código no css, só quando chamarmos por @import.
Ex: _base.scss
Para fazer com que os nossos partials sejam gerados no css é necessário importá-los no arquivo .scss principal.
OBS: Lembrando que a ordem que a gente chama os @imports é a ordem que será gerado no css
Assim como o mixin, os placeholders também são trechos de código que podemos reutilar, mas se ele faz a mesma coisa que o mixin, por que utilizarmos ?
Vamos exemplificar, criamos o seguinte mixin:
Quando aplicamos ele em dois lugares:
O css gerado é o seguinte:
O ideal seria:
E é que os Placeholders fazem a partir do extend, para criar um placeholder fazemos o seguinte:
E chamamos assim:
O resultado gerado no css agora é como queriamos:
Apesar de bem útil, o placeholder possui duas limitações:
- Não podemos criar placeholders com parâmetros, como fazemos com os mixins.
- Os placeholders possuem conflitos ao utilizar junto do @media, podendo gerar esse erro:
You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
Para mais exemplos de placeholders
O SASS possui algumas funções nativas e algumas dela são as de cores:
http://sass-lang.com/documentation/Sass/Script/Functions.html
Exemplo da função para deixar mais claro:
lighten(#829dad, 20%);
Com o SASS podemos utilizar operadores matemáticos: +, - , *, / e %.
Ex no .scss:
Resultado no .css:
Funções, diferente dos mixins, retornam valores, e não trechos de código.
Vamos ver a diferença:
Esse mixin quando chamado:
.scss:
@include adapta-tamanho(2);
.css:
height: 32px;
Mas caso quiséssemos usar em outra propriedade que não o height teríamos que criar outro mixin, então uma opção é criar uma função:
Quando chamamos a função:
.scss:
margin-top: adapta-tamanho(2);
.css
margin-top: 32px;
OBS: Podemos chamar a função de dentro de mixins e placeholders também
Conseguimos usar o if de dentro dos arquivos .scss:
.css:
O @if consegue gerar bloco de código, o if() retorna somente valor.
Estrutura do @if:
@if (condicao 1) {
//Código
} @else if (codicao 2) {
//Código
}@else{
//Código
}
Estrutura do if():
if(condicao, valor se verdade, valor se falso);
Vimos 3 tipos de loops:
- for
- while
- each
A estrutura do for é:
@for $i from {numero inicial} through {numero final}{
//Código
}
Ex:
.scss:
.css:
A estrutura do while é:
condicao = true
@while {condicao}{
//Codigo
{condicao} = false;
}
.scss:
.css:
Nesse loop a gente consegue passar informações de um data-type map:
A estrutura do map:
@variavel: (
'chave1': {valor1},
'chave2': {valor1},
)
A estrutura do each:
@each {chave}, {valor} in map{
//codigo
}
Ex:
Usaremos essa variável como base:
.scss:
.css:
