CSS Avançado

Menu

Próxima página
Página anterior

SASS

SASS é uma extensão do CSS que empodera o CSS básico.

É um pré-processador de CSS, como o Less.

Permite o uso de variáveis, funções, cálculos e hierarquia.

É um Gem do Ruby, ou seja, uma biblioteca escrita em Ruby.

Site do SASS, que tem toda sua documentação:
SASS
No site você vai ter toda as informações de como instalar, como usar, etc...

Como usar o SASS

Pega o arquivo scss ou sass compila para css

Isso é feito em por você mesmo no código.
Mas você usar site online, pré-processadores para fazer essas conversões,
não é ideal, use somente para praticar.

Links dos site que fazem esse pré-processamento:
SCSS para CSS
JSON formatter

Veja como é na imagem abaixo:
print do site que faz a conversão de sccs para css.


SASS para CSS
codebeautify

A imagem do site é bem parecida com o outro site, funcionamento é praticamente igual.

Há vários outros sites compiladores, que fazem isso.

Você pode usar plugin para VScode:
Live Sass Compiler
* Procure nas extensãoes do VScode, e instala ele.
* Vai converter automaticamente o scss para css.

Exemplo do código html de uma página só para testar o plugin:
print do código no VScode, de html simples para testar o puglin para converter sass para css.

Exemplo do código de scss só para testar o plugin:
print do código no VScode, de scss simples para testar o puglin para converter sass para css.

No VScode, depois de instalado o plugin, você clicar o Watching...,
que fica lá embaixo perto do terminal.
print do código no VScode, de onde fica o botão, para converter sass para css.

Ao clicar no "botão" será feita a conversão, de SCSS para CSS se o scss estiver correto.
O próprio VScode cria o style.css com os códigos do SCSS.
print do código no VScode, do style.css que foi convertido do scss.

Veja como fica na página online:
página teste


SASS variáveis

Para a variável se usa o $ e não o "@", como em outras linguagens.

Permiti usar o .sass e .scss.
* .scss é mais parecido com a sintaxe do CSS e Less, é a que usaremos.
Exemplo:
// setando a cor dentro da variável
$cor: red;

.item { -> item -> seria a tag.
______ color: $cor; -> colocar a cor que está na variável "$cor"
}

Veja o print do código, do documento:
print do código de como é usado a variável do SASS.

* .sass é mais parecido com a sintaxe do Pub, ou seja, sem abertura.
Exemplo:
// setando a cor dentro da variável
$cor: red;

.item
______ color: $cor; -> colocar a cor que está na variável "$cor"

*** Não precisa abrir e fechar as tags
Veja o print do código, do documento:
print do código de como é usado a variável do SASS.

No documento do SASS, você terá mais exemplos de como fica os códigos, se for:
.scss ou .sass.
Link para o site, e ter acesso ao documento:
Site SASS

SASS Funções => Mixin

Para usar o mixin.
Temos que declarar ele no inicio antes de usar, veja como deve ser declarado:

@mixin fundoP($color){
_____background-color: $color;
}

Na chamada usamos o @include.

.tipo {
_____@include fundoP($cor);
}

Veja como fica o código no formato SCSS:
print do código, no formato de scss

Veja como fica o código no formato CSS depois de converter:
print do código, no formato css

SASS Funções => Hierarquia

Pode ser usado de forma mais intuitiva, colocando um dentro do outro.
*Sintaxe:
.tipo {
____ @include fundoP($cor2)
____ a {
__________ color: $cor;
_____ }
}

Veja o print do código, style.scss:
print do código, mostrando a sintaxe da hierarquia

Na página fica assim:
print da página, mostrando o uso da hierarquia.

* Pode ser adicionado mais coisas dentro, isso é apenas um simples exemplo.

SASS Funções => Hierarquia

É possivel fazer o uso de imports.
* @use 'base';
* @import 'base'; /* este está em desuso */

Ao contrário das importações de CSS simples, que exigem que o navegador,
faça solicitações HTTP a medida que renderiza sua página.

Aqui importa tudo de uma vez, visto que irá se torna só um arquivo CSS.

* No exemplo, foi criado mais três arquivos em cada um deles,
será aplicado códigos SCSS diferentes.
_base1.scss
print do código base1, de como foi feito o código.

_base2.scss:
print do código base1, de como foi feito o código.

base3.scss:
print do código base1, de como foi feito o código.


Ai no arquivo principal style.scss, você importa os outros que foram criado,
formando todo o CSS dá página, no exemplo separei para ver melhor.
style.scss
print do código style.scss, de como foi feito o código.


Para ver como ficou a página:
Clique aqui

Operadores Matemáticos Math

Semelhantes as outras linguagens.
Operadores Lógicos:
< menor.
<= menor ou igual.
> maior.
>= maior ou igual.
== igual.
!= diferente.

Operações de cálculos:
"+" adição, "-" subtração, "*" multiplicação, "/" divisão.

Para concatenar Strings.
+

Exemplos:
1 + 2 * 3 == 1 + (2 * 3) // vai retorna true "verdadeiro"

true or false and false == true or (false and false)
// retorna true "verdadeiro"

((1 + 2) * 3 + 4) * 5 respota => 65

Operadores Matemáticos Math, na prática

Concatenação
*ligar(-se), juntar(-se) numa cadeia ou sequência lógica ou orgânica.

// variável normal:
$cor-azul: lightblue;
$cor-verde: lightgreen;

// fazendo a concatuação
$cor-azul: light+ blue;
$cor-verde: light+green;

Atenção: Não use aspas '' quando for adicionar:
Exemplo: $cor-azul: 'light' + blue

Fazer cálculos
* Vamos usar como exemplo a margem.

// variável normal
$margem: 10% ;
// variável adicionando a adição de mais 10
$margem: 10% + 10;

Veja como fica na página:
print da página depois de realizar a adição no código sass.

Só usar os sinais matemáticos e os valores que você desejar.

Atenção:
Só não faça assim:
$margem: 0.5 / 2;
** É preciso colocar o número inteiro => 50%

Fazer comparações
* Vamos usar o "if", mas aqui é feito adicionando o "@".
@if(){

} @else {

}

Vamos mostrar um exemplo prático.
// variável
$fundo-preto: black;

Veja na imagem como fica o código:
print do código usando o if no sass
* Se o valor da variável "$fundo-preto" for "black", não vai mudar nada na página.

Veja a imagem da página:
print da página, usando a comparação do if, sem modificações no sass

Agora faremos a mudança na comparação, trocando apenas a cor:
de black para red.

Veja o que acontece com a página.
print da página, usando a comparação do if, com modificações no sass


Operadores Matemáticos Math, na prática

Quando você concatenua uma string, pode ser que tenha aspas,
e não será um valor válido para uma propriedade, não será possível usar ela.

# { variavel + 1 } Cria uma string sem aspas.

Se for usar como número, pode não funcionar.

Na prática:
// variável
$cor-azul: light + blue; => essa é a variável normal,
funciona normalmente veja a página:
print da página, como fica sem usar aspas.

Agora veremos como funciona usando aspas na variável:
// variável
$cor-azul: 'light' + blue; => adicionei nela as aspas, agora não funciona.
Veja a imagem:
print da página, como fica usando a aspas, não irá funcionar.

Para que volte a funcionar, você tira as aspas,
ou pode modicar a propriedade, na hora de passar os valores:

// exemplo de como é colocado no código scss/sass
color: $cor-azul; => o jeito de passar normal é assim.

// modificado para funcionar
color: #{$cor-azul}; => assim vai funcionar mesmo com aspas.

Veja como fica na página, se funcionou ou não:

print da página, como fica usando a aspas, agora irá funcionar.

Repetição / For / Looping-

Não é muito comum usar o for, repetiçao mas pode ser usado em alguns casos específicos.
É possível que haja algum padrão no código scss, para evitar ficar copiando e colando,
por isso pode se usar a repetição.
Exemplo da sintaxe:
$cor: red;

@for $i from 1 through 3 {
_________$nome: 'tipo' + $i "tipo" pode ser uma classe, tag...
_________#{$nome}{
_________________background-color: lighten($cor, $1 * 5%);
_________}
}

Exemplo prático:
Criei um projeto, com três divs colocando cada uma delas com um id diferente:
id="div-1", id="id-2" e id="id-3"

E para que elas recebam a mesma configuração de estilos, usarei o @for.
@for $i from 1 through 3 {
____$nome: '#id-' + $i;
____#{$nome}{
___________font-size: $tamanho;
___________border: $borda;
____}
}

** Assim as três "divs" receberam essas configurações.

Adicionar tamanhos diferentes nas divs
* Pode ser feito adicionando o valor a mais no @tamanho, a cada repetição.

@for $i from 1 through 3 {
____ $nome: '#id-' + $i;
___________#{$nome}{
_______________// só adicionar essa modificação no código:
_______________font-size: $tamanho + ($i * 4);
_______________ border: $borda;
_________ }
_}

Veja a imagem de como fica a página:
print da página, de como fica depois de usar o @for do sass.

Tonalidade de cores, diferentes nas divs

// Adiciona uma variável que recebe a cor vermelha
$corDiv: red;

@for $i from 1 through 3 {
_______$nome: '#id-' + $i;
_________ #{$nome}{
________________ font-size: $tamanho;
________________ border: $borda;
________________ //Adiciona essa linha de código dentro do @for
____________ background-color: lighten($corDiv, $i + %)25;
_______ }
__ }


** Cuidado se colocar um valor muito alto, a cor muda demais, ai será outra cor.

Veja a imagem de como fica a página:
print da página, de como fica as cores depois de usar o @for do sass.

** Pode ser feita várias modificações.

Exercício 2

Vamos criar um projeto.

* Você pode usar uma página sua como base, criando uma cópia.
* Sugiro usar algum plug-in, como segundo opção o Node.js.
* Se já tiver um CSS pode converte-lo para SASS.
* Obrigatório usar: variáveis, mixins, cálculos, looping e hierarquia.

Link do projeto criado, é uma simples página.
Exercicio 2


Próxima página

Página anterior