Executando verificação de segurança...
6

Sass: o CSS com super poderes

O que é Sass?

Sass é uma sigla para Syntactically Awesome StyleSheet, que traduzindo de forma livre fica folhas de estilo com uma sintaxe incrível. Basicamente, o Sass funciona como um super CSS, ou como eu prefiro chamar o CSS com super poderes. Ele é uma extensão do CSS que atráves de um pré-processador compila e gera arquivos CSS puros. Feito para reduzir as repetições e salvar tempo. O Sass adiciona recursos novos ao CSS como variáveis, funções, herança, importações, entre outras coisas.

Sass vs SCSS

A diferença entre arquivos Sass e SCSS é a escrita, enquanto os arquivos SCSS utilizam da escrita similar ao do CSS, usando chaves e ponto e vírgulas, o Sass marca sua linhas atráves da indentação. Os dois possuem as mesmas funcionalidades, a única coisa que os diferencia é a escrita, a equipe pode escolher qual dos dois formatos de arquivo prefere.
Código SCSS:

div {
	color: red;
}

Mesmo código em Sass:

div 
	color: red

Variáveis

As variáveis no Sass são marcadas igual ocorrem em diversas linguagens, usando o prefixo $ (cifrão).

$nome_da_variavel: value;
$primary: #0000ff;
$radius: 12px;
div {
  border-radius: $radius;
  color: $primary;
}

!global

O !global defini que é uma variável de escopo global.

div {
  $primary: red; // somente para esse escopo
  color: $primary 
}
p {
  $primary: blue !global; // escopo global 
  color: $primary;
}
h1 {
  color: $primary; // retorno da variável de escopo global
}

Nested rules

O Sass permite utilizar os mesmos seletores do CSS, porém tem formas alternativas de selecionar os elementos.
No CSS

div {
  width: 500px;
} 
div:hover {
  width: 525px;
}
div p {
  text-align: center;
  text-transform: lowercase;
  text-overflow: hidden;
}

Mesmo código no SCSS

div {
  width: 500px;
  
  &:hover {
    width: 525px;
  }
  
  p {
    text: {
      align: center;
      transform: lowercase;
      overflow: hidden;
    }
  }
}

Import

O import do Sass funciona do mesmo modo do CSS, porém não cria uma requisição HTTP igual ao CSS, o import do Sass soma ao arquivo CSS nativamente sem uma requisição.

@import "filename";

Partials

Os partials são arquivos dos quais não são compilados para CSS, eles são usados somente para serem importados dentro de um arquivo que será compilado. Para definir um partials você deve colocar um underline anterior ao nome do arquivo.

// _colors.scss
$pink: #EE82EE;
$blue: #4169E1;
$green: #8FBC8F;
// style.scss
@import "_colors";
div {
  color: $blue;
  background: $pink;
  border: 1px solid $green;
}

@mixin e @include

Mixin's são frações de código que poderão ser reutilizadas e os includes são o que permite utilizar os mixin’s.

@mixin emphasis {
  color: red;
  background: yellow;
  font-weight: bold;
}
div {
  @include emphasis;
  width: 500px;
}
p {
  @include emphasis;
  font-size: 20px;
}

Variáveis no mixin

Os mixin's também permitem você passar variáveis para dentro dele.

@mixin border($color) {
  border: 2px solid $color;
}
div {
  @include border(black);
}

@extend

A função extend, como já subentende-se no nome, permite você estender uma outra classe.

.button {
  border: 1px solid black;
  background: orange;
  color: white;
}
.large-button {
  @extend .button;
  width: 500px;
}
3

Sass foi um primeiro contato incrível, a muito tempo atrás. Hoje, depois do Tailwindcss, utilizo apenas ele ou CSS puro mesmo.

Inclusive, vale enfatizar que algumas coisas que tinham no Sass, chegaram no CSS há algum tempo.

CSS agora permite aninhamento tranquilamente:

.container {
    .child_1 {
    
    }
    
    .child_2 {
        .other {
            
        }
    }
}

Isso funciona no CSS nativo também.

Outra coisa é a utilização do &, que lembra um pouco o this no javascript:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem; /*20px*/
    
    &:hover {
        background-color: red;
    }
    &:active {
        position: relative;
        bottom: -2px;
    }
}

Isso funciona também agora, depois da última atualização do CSS.

1

no passado, acabei escolhendo Less aó invés do Sass, acho que fiz a escolha errada pois o Sass ficou bem mais popular, de qualquer forma, com as novas funcionalidades do CSS, bem precisaria mais usar o Less, mas continuo usando apenas pois ao salvar e compilar o Less, o sistema já minifica o arquivo CSS melhorando o desempenho e também pelos imports de vários arquivos que permitem organizar classes de forma melhor.

1

Saudades do SCSS e SASS, código bem organizado, reutilizável, simples e sem boilerplate.

Hoje querem enfiar o Tailwind em tudo que é lugar, reinventar a estilização só que de uma forma pior, adicionando uma abstração desnecessária, tendo que instalar dependências e plugins no editor.

1

tudo bem amigo, faça seu front end/mobile com CSS in JS ou pre processadores CSS, se é tão ruim assim utilizar uma ferramenta rápida e prática.

1
1
1

Nunca parei para me aprofundar no Tailwind, por que você dá tamanha preferência em relação ao Sass? Fiquei curioso, talvez deva olhar o Tailwind com mais carinho

1

Tinha um sistema que o front era com Sass, terrível toda vez que tinha que fazer manutenção. Já com Tailwind, esse problema acabou. Toda estilização fica dentro do html e não preciso mais de classes, ids etc. Mudo totalmente a página com uma facilidade extrema. Não mecho mais com css na unha, perda de produtividade total, mas é necessário ter o conhecimento.