SASS (Syntactically Awesome StyleSheets)

Olá! Vamos aprender um pouquinho sobre o pré-processador de CSS chamado SASS?

Um pré processador é um programa que pega alguns dados como entrada, e os devolve de forma diferente, na qual outro programa vai poder entendê-los. Os dados de entrada neste caso serão os arquivos .scss ou .sass, que são compilados em um arquivo .css, podendo serem interpretados pelo browser.

O SASS é uma extensão do CSS que adiciona poder e elegância à linguagem básica

Vantagens:

• Totalmente compatível com CSS
• Funções internas para manipular cores e outros valores
• CSS com superpoderes
• Variáveis, importação, herança, aninhamento, mixins e funções
• Saída bem formatada e personalizável
• Redução no tamanho do CSS
• Diretivas de condicionais e de repetição, além de bibliotecas

$cor-principal: #84E;
$cor-secundaria: #88B;

a {
  color: $cor-principal;
  
  &:hover {
    color: $cor-secundaria;
  }
}

O código acima será convertido em css normal:

a {
  color: #8AE;
}

a:hover {
  color: #88B;
}

SASS ou SCSS?

A sintaxe do SASS é mais antiga, onde não há ponto e virgula no final e também não precisa das chaves.

// style.sass

$font-family: sans-serif
$font-size: 14px

p 
  font-family: $font-family
  font-size: $font-size

Já a sintaxe do SCSS é utilizado as chaves e ponto e virgula:

// style.scss

$font-family: sans-serif;
$font-size: 14px;

p {
  font-family: $font-family;
  font-size: $font-size;
}

Convertendo arquivo do tipo SASS para SCSS e vice-versa pela linha de comando

No site oficial do sass você consegue instalar ele globalmente no seu sistema de maneira bem simples! Caso tenha feito isso, você consegue utilizar os comandos do SASS para fazer as conversões e testar seus usos. Basta adicionar o comando que você deseja no seu terminal.

// converte .sass em .scss
sass arquivo.sass arquivo.scss

// converte .scss em .css
sass arquivo.scss arquivo.css

// converte .scss em outro arquivo .css e vai alterar automaticamente sempre que você fizer alterações
sass --watch input.scss:output.css

// monitora tudo que tiver na pasta scss e coloca na pasta css
sass --watch scss:css

Ambiente gráfico

É bem comum também utilizar um ambiente gráfico para essas tarefas. Existem vários aplicativos de compilar o SASS de forma gráfica. Acesse https://sass-lang.com/install e confira em Applications algumas das propostas :)

SASS online

Caso você prefira fazer algo rapidinho pra estudar e testar seu código, pode acessar o ambiente online :) https://www.sassmeister.com/

Tipos de estilo de saída

O SASS permite que você escolha entre diferentes estilos de saída

• Aninhado (nested)

#main {
  font-size: 14px;
  border: 1px solid black;}
  #main p {
    width: 10em; }

• Expandido (expanded)

#main{
  font-size: 14px;
  border: 1px solid black;
}
#main p{
  width: 10em;
}

• Compacto (compact) - Ocupa menos espaço que os anteriores

#main{ font-size: 14px; border: 1px solid black; }
#main p{ width: 10em; }

• Comprimido (compressed) - Ocupa a quantidade minima de espaço possível

#main{font-size:14px;border:1px solid black;}#main p{width:10em;}

Você pode testar esses estilos de saídas com o seguinte comando: sass --watch scss:css --style compressed

Só substituir o compressed por outro tipo que desejar, seja nested, compact, etc.

Aninhamento

O SASS permite que as regras CSS sejam aninhadas umas nas outras. A regra interna aplica-se somente dentro do seletor da regra externa. O código aninhamento obedece a uma hierarquia.

.card {
  width: 50%;
  p {
    color: #000;
    
    a { 
      text-decoration: none
    }
  }
}

Referenciando seletor pai

O & representa o seletor pai, ao invés de repetir o nome da classe, a gente coloca o &. Podemos aplicar a separação com hífen ou underline.

.card {
  width: 50%;
  
  &__text { // vai compilar para a classe .card__text (metodologia BEM)
    color: pink;
  }
}

Propriedades em namespace

Existe a possibilidade de usar a sintaxe abreviada que reúne todas as sintaxes estendidas font/border/background.

div {
  border: {
    color: black;
    style: solid;
    width: 2px;
  }
}

Variáveis

Uma variável é um espaço reservado na memória do computador. A variável começa com o sinal de $.

Boa prática do CSS: Escolha nomes de ID e classes que lembrem a função que o seletor desempenha no documento e não a sua apresentação (estilização)

Shell interativo SassScript

Conseguimos executar operações, podemos usar pra criar variáveis, etc. É só digitar o comando abaixo no seu terminal :)

sass -interative

Tipos de dados SassScript

• Números (1.2, 10, 200px, 50%)
• Cadeias de texto, com e sem aspas ("lateral", 'content', principal)
• Cores (red, #cccccc, rgba(255, 255, 0, 0.8)
• Booleanos (true, false)
• Nulos (null)
• Lista de valores, separados por espaços ou virgulas (1.5em 2em 0 6em ou Heveltica, Arial, sans-serif)

• Mapas de um valor para outro ($mapa: (key1: value1, key2: value2))

  • Acessando o mapa:
  • $cor: map-get($mapa, chave1)

Visualizando o tipo de dado: type-of(dados) ou type_of(dado)

Imports

Utilizamos a diretiva @import para importar arquivos para dentro do SASS.

• O que podemos importar?

  • Arquivos com extensões: .scss, .sass ou .css
  • Arquivos começando com http://
  • Arquivo com nome do arquivo em uma url()

Se o @import tiver qualquer media queries

@import 'reset.sass'

podemos colocar sem a extensão se quiser.

@import 'reset' 'variaveis'

// main.scss

/* Settings */
@import 'settings/_all';

/* Generic */
@import 'generic/_all';

/* Tools */
@import 'tools/_all';

/* Object */
@import 'object/_all';

/* Components */
@import 'components/_all'

Essa estrutura de pastas é da Arquitetura ITCSS, recomendo a leitura! ^_^

Mixins

Mixins são blocos de código escrito com sintaxe SASS, que pode ser incluído uma ou mais vezes em um arquivo SASS a ser compilado.

Você pode importar seu mixin utilizando o @include.

@mixin colorir($cor-bg, $cor-texto: black) {
  background: black;
  color: white;
}

#main {
  font: {
    style: italic;
    weight: bold;
    variant: small-caps
  }
  @include colorir(black, white);
}

Você não pode colocar o parâmetro com o valor padrão no inicio, tem que colocar no final. (caso você já queira definir algum valor padrão para algum dos parâmetros como é exemplificado no código acima).

Veja um exemplo de mixin com número de argumentos desconhecidos:

@mixin box-shadow($sombras...) {
  -webkit-box-shadow: $sombras;
  -mox-box-shadow: $sombras;
  box-shadow: $sombras;
}

.card {
  @include box-shadow(0px 4px 4px #ccc, 2px 5px 8px #888)
 }

Extend

Com o extend você consegue herdar as propriedades, funcionando como uma herança.

%componente-pai {
  color: red;
  font-size: 14px;
}

.componente-filho {
  @extend %componente-pai;
  background: black;
}

/* arquivo processado */
.componente-filho {
  color: red;
  font-size: 14px;
  background: black;
}

O placeholder é o sinal de identificador desse seletor, então colocamos o %, ele vai funcionar como um seletor normal porem não vai ser processado \o/

Operações em SASSCRIPT

O SASSCRIPT possibilita que se realize operações que normalmente são previstas em outras linguagens de script. As operações possibilitam comparação e manipulação de dados. São utilizados operadores aritméticos, relacionais e de igualdade.

20px + 6px = 26px
20px + 6em = syntax error
20% + 6% = 26%
20em + 6em - 4 = 22em
20 - 1px = 19px

Divisão com resultado adimensional sem a unidade de medida:

(20px) / 6px = 3.33333.

Opções com cores: Só é possível a operação em cores com o mesmo alpha:

#112233 + #223344 = #335577

#330044 * 2 = #660088

red - 9 = #f60000

red + blue - 4 = #fb00fb

Cores HSL: Os parâmetros de cor utilizados nesse sistema são tonalidades hue, saturação e brilho:

hsl(120, 75%, 100%)

darken(escurecer) e lighten(clarear)

lighteen(blue, 30%)

sturate(aumentar) e desaturate(diminuir)

adjust-hue - altera a tonalidade

rgba(cor, alpha) - cor em hexideimal mas você quer aplicar um alpha nela

Operações com strings: Em SASS, o operador de adição destina-se a concatenar strings

font + -size = font-size

Diretivas de controle: @if, @else e @else if, @for, @each e @while

O SASSCRIPT suporta diretivas de controle e expressões básicas para incluir estilos sob algumas condições ou incluindo o mesmo estilo varias vezes com variações. As diretivas são um recurso avançado e são incomuns no dia a dia. Elas existem principalmente para uso em mixins.

@diretiva expressao {
    // script
}

@if($cor == red) {
  body {
      background: $cor;
  }
} @else if($tamanho > 10) {
  
}

Exemplo de mixin baseado em horário:

@mixin tema($horario) {
  @if $horario == manha {
    background: white;
    color: black;
  } @else if $horario == tarde {
    background: pink;
    color: purple;
  } @else {
    background: black;
    color: white;
  }
}

body {
  @include tema(manha)
}

Exemplo de mixin que colore uma propriedade levando em consideração o seu tom:

@mixin colorir($cor, $propriedade, $tom) {
  @if($tom == 1) {
    #{$propriedade}: lighten($cor, 40%)
  } @else if($tom == 2){
    #{$propriedade}: lighten($cor, 20%)
  } @else if($tom == 3){
    #{$propriedade}: lighten($cor, 10%)
  } @else if($tom == 4){
    #{$propriedade}: lighten($cor, 10%)
  } @else if($tom == 5){
    #{$propriedade}: darken($cor, 15%)
  } @else if($tom == 6){
    #{$propriedade}: darken($cor, 20%)
  }
}

body {
@include colorir(pink, background, 3)
}

Repetição com @for

O for usa uma variável contadora que é incrementada. Normalmente, o próprio valor da variável contadora é utilizado no script:

@for $i from 1 through 4 {
  div.item-#{$i}{ width: 20% * $i; }
}

// repete isso 4 vezes

//div.item-1 { width: 20%; }
//div.item-2 { width: 40%; }
//div.item-3 { width: 60%; }
//div.item-4 { width: 80%; }

Se você trocar o through por to, ele não vai mais executar 4 vezes e sim, executar só até o 4, só que vai excluir o 4 e ir até o 3.

@for $i from 1 to 4 {
  $k: 2 * $i;
  div.item-#{$k * 100}{ width: 100px * $k; }
}

// div.item-200 { width: 200px; }
// div.item-400 { width: 400px; }
// div.item-600 { width: 600px; }

Repetição com @each

O each usa uma variável que atua como um ponteiro e executa o script toda vez que o ponteiro encontra um valor em uma lista ou um mapa:

@each $icon in insta, face, youtube {
  .icone-#{$icon}{
    background: url(img/#{$icon}.png);
   }
}

// .icone-insta { background: url(img/insta.png); }
// .icone-face { background: url(img/face.png); }
// .icone-youtube { background: url(img/youtube.png); }

$redes-sociais: (insta, face, youtube);

@each $icon in $redes-sociais {
  .icone-#{$icon} {
    background: url(img/#{$icon}.png)
  }
}

Repetição com @while

Executa um bloco de código enquanto um valor for verdadeiro:

$cont: 1;
@while $cont < 5 {
  .item-#{$cont} {
    width: 50px * $cont;
  }
  $cont: $cont + 1;
}

// .item-1 { width: 50px; }
// .item-2 { width: 100px; }
// .item-3 { width: 150px; }
// .item-4 { width: 200px; }

O que são funções?

Funções destinam-se a criar blocos de códigos para serem executados em vários pontos de um script, são semelhantes aos mixins, a diferença é que ela sempre vai ter um retorno!

@function calc($arg1, $arg2, ...) {
  // script que ira utilizar os argumentos
  @return $res
}

@function quadrado($valor) {
  $res: $valor * $valor;
  @return $res;
}

h1 {
  font-size: quadrado(6) + px;
}

// h1 { font-size: 36px; }

Funções nativas

O SASS prevê funções nativas para manipular todos os tipos de dados

Funções para cores (rgb):

• rgb($red, $blue, $green);
• rgba($red, $blue, $green, $alpha)
• red($cor); blue($cor); green($cor)
• mix($cor1, $cor2, $porcentagem)

Funções para cores (HSL):

• hsl($hue, $saturation, $lighten)
• hsla($tom, $sat, $lum, $alpha)
• hue($cor); saturation($cor); lightess($cor)
• grayscale($cor)
• complement($cor); invert($cor)
• adjuste-hue, lighten, darken, saturate, desaturate

Funções para opacidade:

• alpha($cor) ou opacity($cor);
• rgba($cor, $alpha)
• opacity($cor, $val) ou fade-in($cor, $val)
• transparentize($cor, $val) ou fade-out($cor, $val)

Funções para strings:

• unquote($string);
• quote($string);
• str-length($string);
• to-upper-case($string)
• to-lower-case($string)

Funções para números:

• percentage($num, round($arredonda);
• ceil($arred-prox); floor($arred-ante);
• min($numeros...); max($numeros...)
• random($limite)

Funções para listas:

• length($lista);
• nth($lista, $pos-item);
• set-nth($lista, $pos-item, $novo-valor)

Funções para mapas:

O maps é como um array de variáveis. Ela guarda uma série de chaves com valores.

// sintaxe base
$map: (
  key1: value1, 
  key2: value2, 
  key3: value3
);

// exemplo de uso um pouco mais complexo
$cores: (
  azul: (
    color1: #0176bb, 
    color2: #23aad0,
    color3: #edf7fd
  ),
  vermelho: (
    color1: #e3413e, 
    color2: #1f518c,
    color3: #f8e042
  ),
  amarelo: (
    color1: #4a5269, 
    color2: #fc7d74,
    color3: #4a5269
  )
);

• map-get($mapa, $chave): Pega o valor específico de cada variável
• map-merge($mapa1, $mapa2): Mescla dois mapas existentes 
• Há muito mais usos de maps!

E aí? curtiu? (◠‿◕✿)