14

Muito ouço falar em SASS e SCSS, mas não sei exatamente como essas ferramentas funcionam. Apenas sei que são geradores de CSS(?).

Encontrei uma pergunta relacionada aqui mas ela não trata da questão do porquê usa-las, apenas a diferença de sintaxe entre uma coisa e outra.

Como desenvolvedor front-end nunca usei tais ferramentas, mas gostaria de ter uma noção do que elas fazem caso eu venha a desenvolver um projeto e ache que elas sejam melhores opções do que CSS convencional, afim de melhorar ou tornar a parte de CSS mais funcional.

Por isso gostaria de saber:

  • O que elas fazem exatamente?

  • Em quais casos seria útil usá-las no lugar de CSS convencional?

  • Não prejudicaria a performance da página em vez de usar CSS normal já que seria um processo a mais ou o custo x benefício vale a pena?

4 Respostas 4

16

Vou compartilhar o que conheço e algumas fontes sobre o assunto.

O que elas fazem exatamente?
LESS, SASS e SCSS são extensões do CSS, ou seja, de uma maneira bem simples, adicionam funcionalidades ao CSS. Pegando o contexto de desenvolvimento Web, podemos pensar em como o TypeScript é para o Javascript, adiciona novas funcionalidades, sem quebrar a compatibilidade, ou seja, no final o código é compilado, ou convertido para uma versão padrão. Assim também fazem esses pré-processadores de CSS.

Um exemplo mais funcional ajuda a entender. Cenário 1, conteúdos repetidos ao longo do CSS. É comum a empresa fornecer a paleta de cores e as cores serem definidas segundo esse padrão. Então o mesmo RGB aparece várias vezes no CSS. Ou o nome de das fontes, e por ai vai. Quando precisa achar as cores, tem que recorrer ao buscar, e quando quer mudar por exemplo, tem que sair trocando no código todo. Se tivesse uma funcionalidade básica de linguagem de programação no CSS, que são as variáveis, isso seria facilmente resolvido.

Exemplo:

.estilo1 {
   background-color: #fafafa;  /* uma cor padrão */
   font: Helvetica, sans-serif
}
.estilo3 {
   color: #fafafa
}
.estilo4 {
   background-color: #fafafa; /* novamente, de uma maneira que foi inevitável não duplicar...*/
   font: Helvetica, sans-serif
}

Agora não seria mais fácil de visualizar e alterar se fosse algo assim:

$cor-padrao: #fafafa
$font-padrao: Helvetica, sans-serif;
.estilo1 {
   background-color: $cor-padrao;
   font: $font-padrao
}
.estilo3 {
   color: $cor-padrao
}
.estilo4 {
   background-color: $cor-padrao;
   font: $font-padrao;
}

Esse segundo código após processado, será gerado igual ao primeiro, não causando incompatibilidade com os navegadores.

Esse é um exemplo simples, mas que dá pra ter ideia de como pode ser fácil fazer certas coisas, deixar o código claro, e também mais simples de dar manutenção, poderia alterar a cor padrão apenas na variável e todo o código CSS já estaria refletindo a alteração.

Outro bom exemplo é o recurso de Mixins, que permite reutilizar uma parte do CSS, como se fosse uma function. Veja esse exemplo:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Fonte: https://sass-lang.com/guide

Em quais casos seria útil usá-las no lugar de CSS convencional?
Bom, poderia dizer que todos. Sempre que se tem uma extensão, à medida que você domina começa a usar mais, então começa a perceber mais opções de onde pode ser útil. É possível escrever um código 100% em em pré-processador, e, à medida que vai dominando os recurso, vai implementando, o que faz a curva de aprendizagem suave.

Não prejudicaria a performance da página em vez de usar CSS normal já que seria um processo a mais ou o custo x benefício vale a pena?
Como o código pode ser compilado e entregue como um CSS normal, não há incompatibilidade o custo seria esperar alguns segundos (não chega a isso, mas se chegar...) só na hora de montar o pacote para publicar, não creio se seja grande empecilho. Algumas IDEs também permitem compilar o código enquanto ele vai sendo salvo, o que deixa o processo ainda mais simples e transparente.

Aqui um link com uma outra explicação bem simples sobre os recursos: tableless.com.br/sass-um-outro-metodo-de-escrever-css

9

Bom, podemos dizer que SCSS e SASS fazem tudo que o CSS deveria fazer e não faz. Aqui vai alguns exemplos:

Fácil manutenção

Imagine que tenho um site com uma determinada paleta de cores e preciso alterar a paleta do mesmo ou criar um novo template para variar em determinada página. Assim temos:

  • Em CSS eu teria que acessar todos os arquivos de estilo e alterar as cores. Ex:

foo.css

.bg-foo { background-color: #00FF00; } /* aqui seria alterado */
.fg-foo { color: #00FF00; }            /* aqui seria alterado */

navbar.css

.navbar { background-color: #00FF00; } /* aqui seria alterado */
  • Em SASS ou SCSS posso criar variáveis e importá-las onde quiser e assim, quando o código for compilado para CSS, elas estarão já definidas. Ex:

_variables.scss

$color-x: #00FF00;                     /* aqui seria alterado */

_foo.scss

@import './variables.scss';
.bg-foo { background-color: $color-x; } 
.fg-foo { color: $color-x; }

_navbar.scss

@import './variables.scss';
.navbar { background-color: $color-x; } 

Código programado e não somente escrito

  • Em CSS se eu quiser definir uma estrutura de paddings como ocorre no bootstrap eu faria algo assim:

paddings.css

.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
  • Em SCSS eu poderia usar um loop como o for que toda linguagem tem, ficando assim:

_paddings.scss

@for $i from 1 through 5 {
    .p-#{$i} { padding: $i * 4px; }
}   

Particularmente, eu prefiro usar SCSS por manter uma "visualização" mais próxima de C#, C++, Java ou outras linguagens que tem uma certa estrutura. O design do SASS é baseado no PERL, Rails, Python, e não tem as chaves, ele usa as quebras de linha e tabulação como separação e isso em confunde mas, independente de qual você usar, você ainda terá as mesmas funcionalidades e ainda, o SCSS entende SASS e vice-versa =D

Também me fiz essa pergunta a algum tempo e por isso o empenho na explicação. Agora que entendo SCSS/SASS vejo que CSS não deveria ser escrito porque leva muito tempo, é cabível de falhas de escrita e dependendo do tamanho da solução fica impossível de manutenção... Espero que lhe ajude.

7

Existe ainda um outro conceito que não foi abordado pelas outras resposta que é o aninhamento de seletores ou em inglês nested selector

Essa prática é muito interessante na hora de criar componentes web.

Veja abaixo um exemplo de código CSS aninhado.

.features {
  background-color: #cccccc;
  .box {
    border-radius: 3px;
    border: 1px solid #666666;
    background-color: white;
    p {
      font-size: 1rem;
      line-height: 1.2;
      color: #333333;
    }
  }
}

O código acima seria o mesmo que isso no CSS padrão:

.features {
  background-color: #ccc;
}
.features .box {
  border-radius: 3px;
  border: 1px solid #666;
  background-color: white;
}
.features .box p {
  font-size: 1rem;
  line-height: 1.2;
  color: #333;
}

Outra prática é o aninhamento de pseudo-classes e pseudo-elementos como vc pode ver nesse exemplo

   .element {
   /* meu css */
      &:hover,
      &:focus {
        /* meu css */
      }
      &::before {
        /* meu css */
      }
    }

Aqui tem um artigo bem interessante sobre o conceito: https://www.sitepoint.com/beware-selector-nesting-sass/


OBS: Um dos principais argumentos para se usar esses modelos de construção de CSS é a produtividade. Existem vários artigos falando de como escrever em LESS ou SASS diminui o número de linhas de código e consequentemente o tempo de trabalho.

Sobre a compatibilidade eu não vejo problemas já que os preprocessadores compilam o SCSS, LESS, SASS ou Stylus etc s cospem um .CSS no final...

-3
$cor-do-gramado: #4CAF50;
$cor-do-campo: #FFFFFF;
$cor-do-gol: #FF0000;
$cor-das-linhas: #333;
.mapa {
  width: 600px;
  height: 400px;
  background-color: $cor-do-gramado;
  position: relative;
  
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: $cor-das-linhas;
    transform: translateY(-50%);
  }
  
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: $cor-das-linhas;
    transform: translateX(-50%);
  }
  
  .campo {
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: $cor-do-campo;
    top: calc(50% - 30px);
    left: calc(50% - 50px);
    
    &.gol {
      height: 20px;
      background-color: $cor-do-gol;
      
      &.esquerda {
        top: calc(50% - 10px);
      }
      
      &.direita {
        top: calc(50% + 10px);
      }
    }
  }
}
<div class="mapa">
  <div class="campo"></div>
  <div class="campo gol esquerda"></div>
  <div class="campo gol direita"></div>
</div>
1
  • 1
    Olá! O autor da pergunta quer saber o que é SASS e SCSS, o que fazem, quais casos de uso e performance. Acredito que esse código não responda a questão levantada. Para aprender sobre o funcionamento do site faça o tour, leia Como responder e visite a central de ajuda. Commented 9/12/2023 às 5:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .