Rafael Alves ITM

Syntactically Awesome Style Sheet

Leitura de 3 min

🎯 Syntactically Awesome Style Sheet

Em poucas palavras

SASS (Syntactically Awesome Style Sheet) é um Pré-processador CSS que estende a funcionalidade do Cascading Style Sheets (CSS), permitindo escrever estilos de forma mais eficiente, organizada e reutilizável. Ele introduz recursos como Variáveis, Aninhamento de Seletores, Mixins, Herança (CSS) e Funções CSS, que simplificam o desenvolvimento de folhas de estilo complexas.

📝 Notas e Desenvolvimento

🔗 Conexões e Contexto

📚 Referências e Fontes

Citações Diretas

📂 Outros Conteúdos Preservados

Syntactically Awesome Style Sheet (SASS)

Syntactically Awesome Style Sheet (SASS)

SASS (Syntactically Awesome Style Sheet) é um Pré-processador CSS que estende a funcionalidade do Cascading Style Sheets (CSS), permitindo escrever estilos de forma mais eficiente, organizada e reutilizável. Ele introduz recursos como Variáveis, Aninhamento de Seletores, Mixins, Herança (CSS) e Funções CSS, que simplificam o desenvolvimento de folhas de estilo complexas.

Por que usar SASS?

  • Reutilização de Código: Através de Variáveis e Mixins, evitamos repetição de código.
  • Organização: Aninhamento de Seletores e Partials (SASS) (arquivos importados) ajudam a estruturar o código de forma lógica.
  • Manutenção: Alterações em Variáveis ou Mixins se refletem em todo o projeto, facilitando a manutenção.

Funcionalidades Principais:

  1. Variáveis: Permitem armazenar valores (como cores, fontes, tamanhos) para serem reutilizados.
// Exemplo de Variáveis em SASS
$cor-primaria: #3498db;
$tamanho-fonte-base: 16px;
 
body {
	font-size: $tamanho-fonte-base;
	color: $cor-primaria;
}
 
h1 {
	color: darken($cor-primaria, 10%); // Exemplo de função SASS
}
  1. Aninhamento de Seletores: Permite aninhar seletores CSS dentro de outros, espelhando a estrutura HTML e tornando o código mais legível.
// Exemplo de Aninhamento
nav {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
 
		li {
			display: inline-block;
			a {
				text-decoration: none;
				&:hover { // Pseudo-classe aninhada
					color: red;
				}
			}
		}
	}
}
  1. Herança (@extend): Permite que um seletor herde os estilos de outro seletor.
// Exemplo de Herança
%mensagem-base { // Placeholder selector
	font-family: sans-serif;
	font-size: 18px;
	font-weight: bold;
	border: 1px solid black;
	padding: 20px;
	margin: 20px;
}
 
.sucesso {
	@extend %mensagem-base;
	background-color: green;
}
 
.aviso {
	@extend %mensagem-base;
	background-color: orange;
}
 
.erro {
	@extend %mensagem-base;
	background-color: red;
}
  1. Mixins: Permitem definir grupos de declarações CSS que podem ser reutilizados em vários seletores, aceitando argumentos.
// Exemplo de Mixin
@mixin borda-arredondada($raio: 5px) {
	-webkit-border-radius: $raio;
	-moz-border-radius: $raio;
	border-radius: $raio;
}
 
.caixa {
	@include borda-arredondada(10px);
}

Compilação SASS para CSS

Os navegadores não entendem diretamente arquivos .scss. Portanto, o código SASS precisa ser compilado para Cascading Style Sheets (CSS) antes de ser utilizado em uma página web.

  • Ferramentas: A implementação mais comum e recomendada é o Dart Sass. Outras ferramentas como Node-Sass (agora depreciado) e Ruby Sass (também depreciado) existiam.
  • Comando Básico (Dart Sass):
sass input.scss output.css

Este comando compila um único arquivo SASS para um arquivo CSS.

  • Compilação Automática (Watch Mode): Para monitorar alterações e compilar automaticamente:
sass --watch input.scss:output.css

Ou para compilar múltiplos arquivos:

sass --watch src/:dist/

Onde src/ contém os arquivos .scss e dist/ é o diretório de saída para os arquivos .css.

:: Referência :: Cascading Style Sheets

Visão de gráfico

Backlinks