Introdução ao Sass

O que você deve saber

Antes de continuar, você deve ter uma compreensão básica dos seguintes conteúdos:

  • HTML
  • CSS

Se você quiser aprender esses assuntos primeiro, visite nosso Página inicial Acesse essas tutoriais aqui.

O que é Sass?

  • Sass se refere a Syntactically Awesome Stylessheet (folha de estilo com uma sintaxe incrível)
  • Sass é uma extensão do CSS
  • Sass é um preprocessador CSS
  • Sass é completamente compatível com todas as versões do CSS
  • Sass reduz a repetição do CSS, economizando tempo
  • Sass foi projetado por Hampton Catlin e desenvolvido por Natalie Weizenbaum em 2006
  • Sass pode ser baixado e usado gratuitamente

Por que usar Sass?

As folhas de estilo ficam cada vez maiores, mais complexas e mais difíceis de manter. É aqui que os preprocessores CSS podem ajudar.

Sass permite que você use características que não existem no CSS, como variáveis, regras aninhadas, mixins, importação, herança, funções integradas e outras funcionalidades.

Um exemplo simples e útil sobre Sass

Suponhamos que tenhamos um site com três cores principais:

#a2b9bc
#b2ad7f
#878f99

Então, você precisa digitar esses valores HEX quantas vezes? Muitas vezes. E se a cor mesma mudar?

Você pode usar Sass para escrever o seguinte código, em vez de digitar várias vezes os valores acima:

Exemplo Sass

/* Define variáveis para cores originais */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Usar variáveis */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Portanto, ao usar Sass, se a cor original mudar, você precisa alterá-la apenas em um lugar.

Como o Sass funciona?

O navegador não entende código Sass. Portanto, você precisa de um pré-processador Sass para converter código Sass em CSS padrão.

Este processo é chamado de transpilação (transpiling). Portanto, você precisa fornecer código Sass para o transpilador (algum programa) e obter código CSS.

Dica:Tradução é um termo usado para converter/Traduzir código-fonte escrito em um idioma para outro idioma.

Tipo de arquivo Sass

O nome da extensão do arquivo do Sass é ".scss".

Comentários Sass

O Sass suporta comentários CSS padrão /* comentário */Além disso, suporta comentários inline // comentário:

Exemplo Sass

/* Definir cores principais */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Usar variáveis */
.main-header {
  background-color: $primary_1; // Você pode adicionar comentários inline aqui
}